Vertical-align with baseline and textareas

Question

I'm trying to get a label lined up with the baseline of the first line of text in a text area.

The naive attempt:

<div style="vertical-align: baseline; display: inline-block">
   <label for="comments">Comments:</label>
</div>
<div style="vertical-align: baseline; display: inline-block">
   <textarea name="comments" id="comments"></textarea>
</div>

results in the label being aligned with the bottom of the text area. I'd prefer to have it lined up with the first line of the area.

Thanks.

Answer 1

You need to put the label div inside of the same div as the textarea, then, if you want it set to the top of the textarea you're looking for vertical-align: top, not baseline.

View and example here:
http://jsfiddle.net/anhus/