Css 如果内容太宽，则从浮点清除内联块

我正在尝试制作一个消息模板，如下所示

<div class='message'>
    <div class='from'>
        <i class='avatar'></i>
        <span>Name</span>
    </div>
    <div class='body'>
        <div class='content'>Hello</div>
    </div>
</div>

.message { clear: both; }    
.from {  
    float: left;
    margin-right: 12px;
}
.from > i {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid #000;
}
.from > span {
    display: block;
    width: $avatar-width;
    line-height: 1em;
}
.body {
    position: relative;
}
.body > .content {
    display: inline-block;
    padding: 15px;
    border: 3px solid #000;
    overflow: hidden;
}

名称
你好
.message{clear:两者；}
.来自{
浮动：左；
右边距：12px；
}
.from>i{
显示：内联块；
宽度：50px；
高度：50px；
边框：2倍实心#000；
}
.from>span{
显示：块；
宽度：$化身宽度；
线高：1米；
}
.身体{
位置：相对位置；
}
.body>.content{
显示：内联块；
填充：15px；
边框：3倍实心#000；
溢出：隐藏；
}

我很难把内容和div.保持在同一条线上。当内容太宽时，内容将转到新行。请明白我的意思

有什么想法吗？谢谢。

你试过以下内容吗

.form {
    width: 54px;
}
.body {
    padding-left: 70px;
}

---

哇，这很简单也很好。身体填充物可以解决这个问题。谢谢