Html 在div的相对侧放置跨距，不使用浮动

我在一个div里面有一些span。我想在左侧有一个span，其中包含一些字符串，在右侧有一个span，其中包含一些字体图标。但是，我不能使用浮动，因为这些元素嵌套很重，这会导致问题。请注意，宽度是有限的，有时如果字符串足够长，它可能会断字

<div>
<span>Some Long Text Here</span>
<span><i class="fa fa-bars"></i></span>
</div>

这里有一些长文本

如果是选项，请使用flexbox：

div{
线高：20px；
填充：15px；
颜色：白色；
背景：紫色；
/*代码弹性*/
显示器：flex；
}
跨度：第一个孩子{
flex:1自动；
}

这里有一些长文本


Lorem ipsum dolor sit amet，奉献精英。事实上，我们的劳动是为了阻止暴力的发生，而不是为了防止暴力的发生！

如果您想保证间距，可以使用flexbox或float（float不会像您所说的那样弄乱“重嵌套”元素）。。