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

Question

我想显示一个textarea用户输入和它的权利我想显示一个指令文本。我希望指令文本使用文本区域旁边的可用宽度，并且我希望它的行可以根据需要进行换行，但要保留在textarea的右侧。我希望文本与文本区域一致。

<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会滑入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>

I H大家编辑你的代码，只要你想。请检查希望这会有所帮助。