内联跨度错误（？）

Question

我大部分时间都花在后端上，前端并不是我真正的专长，而且我在调试方面的技能几乎不占优势（除了F12反复试验）。

我已经从后端输入的数据创建了一个列表（用于Google Maps）。

如您所见， treybake2 的电子邮件为： t.taylor@domain.co.uk -21个字符。

treybake 的电子邮件为 t.taylor@some-domain.co.uk -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
}

我大部分时间都在谈论前端，但是我无法真正为xD设置xdebug

那么，如何开始尝试调试我的跨度？逻辑上，如果有任何内容要换到新行，那么肯定是 treybake2 吗？为什么反过来呢？

编辑：

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