html - 如何确保跨度始终出现在可能调整大小的 div 内的文本区域的右侧？

Question

我有四个 div，每个的宽度都是页面的 25%。这是我的 HTML 代码:

<div style="display: table-cell; width:25%">
    <div>
        <textarea style="height: 1.5rem; width: 95%"></textarea>
        <span style="display: inline-block; margin-left: 0.5rem;">xx</span>
    </div>
</div>

外层<div>是 display: table-row 内四个大小相同的其中之一在display: table里面.

有没有一种方法可以确保带有 xx 的跨度始终出现在文本区域的右侧而不是下方。当页面变宽时，它会出现在右侧，但随着页面尺寸的减小，可用的 5% 跨度变小，并移动到文本区域下方。

Answer 1

使用 float定位 <span>还有float parent <div>

https://jsfiddle.net/ckxLzgdp/