Question

We have a table with two columns: in each row there is a label on the left and an input box on the right.
We use vertical-align=text-bottom; to align the bottom of the label text with the bottom of the text in the input boxes.

So far so good.

However, sometimes we have a textarea (multiple lines) instead of the input box. The bottom of the label on the left is aligned with the bottom of the last line of the textarea.

Is there a way to align the text on the left with the first row of the textarea?

A simplified example

<table class="waiFormTable">
  <tr>
    <td><label>Label 1:</label></td>
    <td><input id="id" type="text" name="name" value="value" /></td>
  </tr>
  <tr>
    <td><label>Label 2:</label></td>
    <td><textarea id="id" type="text" name="name" value="value" /></td>
  </tr>
</table>

in the CSS we define:

table.waiFormTable thead tr,
table.waiFormTable tbody tr {
  vertical-align: text-bottom;
}

In this example I would like to have “Label 1:” text-bottom aligned with the first row of the textarea.

Answer 1

In fact, when you have a textarea, you want to align to the top.

Apply a special style (example : labelTextarea) in this case

<tr>
    <td class="labelTextarea"><label >Label 2:</label></td>
    <td><textarea id="id1" type="text" name="name1"  >value</textarea></td>
</tr>

with:

.labelTextarea{
vertical-align: top;
}