Center text vertically next to a one row textarea?

Question

I want the text that sits next to a one row textarea to be centered vertically with the textarea.

This is the default behavior if I put text next to an input of type="text".

Id like to stick with the single row textarea rather than an input here because this field is there for the user to paste a fair amount of pre formatted data into. The user wont normally care what the data says or need to see it unless the program finds a problem. If a problem is found an error is shown, at which point its helpful if the user can drag out the text area to view the data and research the issue.

My Code:

<tr>
<td class="vert" > New PNR Info
  <textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></td>
<td align="center">Change Fee
  <input type="text" size="4" id="fee"name="fee"></td>
</tr>

Ive Tried:

css like this:

.vert {
    vertical-align: middle;
}

and this vertical-align: top;

and wraping the two in a p tag like this

<p>New PNR Info<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></p>

to no avail.

If my question is not clear maybe a screenshot will help. I want the offending text by the red arrow to be cetered like the text by the green arrow.

Answer 1

It doesn't seem logical at first, but the vertical-align property needs to go on the taller element:

http://jsfiddle.net/N5NuA/

textarea {
    vertical-align: middle;
}