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">test</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

The problem is that the textarea is viewed as a block, like an image. When doing a vertical-align, it is using the border to determine placement instead of the text. In the example below, you can see that the label and div are positioned based on the text inside, where the textarea behaves like the image.

http://jsfiddle.net/kenearley/nGaQs/3/

I think the only way to get the label and textarea to align the way you want is to do a vertical-align:top, then make sure your font-size and line-height ratio match up right.