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

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 右侧的可用 space 太小而无法将说明文本放在一行中时，整个 div.instructions 会滑到 textarea 下方。

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>

Answer 2

.form-block {
  display: table;
}
.f-align {
  display: table-cell;
  vertical-align: top;
  padding: 10px;
}

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

我已经根据需要编辑了您的代码。请检查希望这会有所帮助。

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

Autosize width of text beside textarea?

html

css

autosize