自動調整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大家編輯你的代碼，只要你想。請檢查希望這會有所幫助。