html - 自动调整文本区域旁边文本的宽度？

Question

我想为用户输入显示一个文本区域，并在它的右侧显示一个说明文本。我希望说明文本使用文本区域旁边的可用宽度，并且我希望它的行根据需要换行，但保持在文本区域的右侧。我希望文本与文本区域顶部对齐。

<div class="container">
  <textarea rows="10" cols="30">Text data</textarea>
  <div class="instructions">
    Please follow these instructions when entering data 
    into the textarea to the left. Blah blah blah..
  </div>
</div>

我如何使用适用于大多数现代浏览器的 HTML5 和 CSS3 实现这一点？

编辑:也许我应该补充一点，我尝试将 textarea 和 div.instructions 设置为 display: inline-block，但事实并非如此足够了，因为 div.instructions 没有换行。相反，当 textarea 右侧的可用空间太小而无法将说明文本放在一行中时，整个 div.instructions 会滑到 下方文本区域。

JSFiddle:https://jsfiddle.net/0bh0mLej/

Answer 1

你可以使用display: table-cell:

<div class="container">
  <div style="display: table-cell">
      <textarea rows="10" cols="30">Text data</textarea>
  </div>
  <div style="display: table-cell; vertical-align: top;">
    Please follow these instructions when entering data 
    into the textarea to the left. Blah blah blah..
  </div>
</div>