html - 内联跨度错误（？）

Question

我大部分时间都花在后端，前端并不是我的强项，我的调试技能几乎没有（除了 F12 试错）。

我从后端输入的数据创建了一个列表（用于谷歌地图）。

如您所见，treybake2的电子邮件地址为：[e-mail] - 21 个字符。

treybake的电子邮件地址为[e-mail] - 26 个字符。

然而，后者的选项（具有较长的电子邮件）似乎包装了我的预期，而较短的电子邮件地址完全下降到一个新的行。

这是电话/电子邮件部分的标记：

<div class="col-sm-12 no-padding">
    <div class="col-sm-6 no-padding">
        <i class="fas fa-phone fa-rotate-90"></i>
        <span><?php echo $dealer->tel; ?></span>
    </div>

    <div class="col-sm-6 no-padding">
        <i class="fas fa-envelope"></i>
        <span><?php echo $dealer->email; ?></span>
    </div>
</div>

从类名可以看出，它使用 Bootstrap。

希望这是相关的CSS：

#dealer-list {
    background: #f6f6f6;
    height: 350px;
    margin-bottom: 0;
    margin-top: 0;
    overflow-y: scroll;
    padding: 20px 15px
}

#dealer-list li {
    background: #fff;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .1);
    font-size: 12px;
    margin-bottom: 15px;
    padding: 15px
}

#dealer-list li div {
    margin: 5px 0
}

div.no-padding {
    padding: 0
}

在大多数情况下，我是前端的擦洗，我不能真正为这种东西设置 xdebug xD

那么，我该如何开始尝试调试我的 span？从逻辑上讲，如果有任何人要换行，那肯定是treybake2吗？为什么反过来呢？

编辑：

忘记输入我想要的输出：treybake是我希望显示所有电子邮件的方式。

标签： htmlcsstwitter-bootstrap