Alineación vertical con línea de base y áreas de texto

Question

Estoy tratando de alinear una etiqueta con la línea de base de la primera línea de texto en un área de texto.

El ingenuo intento:

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

resultados en la etiqueta estando alineados con la parte inferior del área de texto. Preferiría que se alineara con la primera línea del área.

Gracias.

Answer 1

Es necesario poner el labeldiv interior de la misma div como el área de texto y, a continuación, si lo desea establece en la parte superior de la textarea estás buscando vertical-align: top, no baseline.

Vista y el ejemplo aquí:
http://jsfiddle.net/anhus/

Answer 2

El problema es que el área de texto es visto como un bloque, como una imagen. Al hacer una alineación vertical, está utilizando el borde para determinar la ubicación en lugar del texto. En el siguiente ejemplo, puede ver que la etiqueta y el div se ubican en función del texto dentro, donde el área de texto se comporta como la imagen.

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

Creo que la única manera de conseguir la etiqueta y el área de texto para alinear la forma en que desea es hacer una vertical-align: top, a continuación, asegúrese de que el tamaño de fuente y la relación line-height partido hasta derecho.