Make a label for a textarea go next to it but aligned in the center vertically

Question

Please take a look at this fiddle: http://jsfiddle.net/hughbe/QYGcq/

As you can see, the label for the <textarea id = "FooText"></textarea> is next to the textarea as it should be, however, I would like to make the label vertically next to the textarea, or at the top of the textarea, instead of at the bottom, like it is in that fiddle.

I have tried setting it's css to vertical-align: middle but that didn't work. What must I do to make the label aligned at the top or the middle?

Thanks.

Answer 1

Use vertical-align: middle on the textarea http://jsfiddle.net/VxY6m/

Because vertical align meant to be relative to text line - label in this case.

Answer 2

Try this:

<style>
    label {
        display: block; 
        float: left; 
        padding-top: 8px
    }
    textarea {
        resize: none; 
        overflow-y: hidden;        
    }
</style>
<label for="FooText">Content:</label>
<textarea id="FooText"></textarea>

What I did was make the label a block element and apply a top padding to it. See the fiddle also.