Autosize width of text beside textarea?

I want to display a textarea for user input and to the right of it I want to display an instruction text. I want the instructions text to use the available width beside the text area and I want its lines to wrap as necessary, but stay to the right of the textarea. I'd like the text to be top aligned with the text area.

<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>

How would I achieve this with HTML5 and CSS3 that works in most modern browsers?

EDIT: Perhaps I should add that I tried setting both textarea and div.instructions to display: inline-block, but that's not enough because the div.instructions doesn't wrap. Instead, when the available space to the right of the textarea is too small to fit the instructions text on a single line, the entire div.instructions slips below the textarea.

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

Solution

You can use 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>