I'm trying to build a form that contains inputs, textareas and block elements, each with a label. In order to get a flexible grid, I'm using a table. For a matching vertical alignment of the labels and the inputs/textarea I set vertical-align: baseline; which works fine for inputs and textareas. But not for divs (see this jsFiddle). The label for the div is consequently aligned at the bottom of the cell, but I want it on the top, i.e. the baseline should be on the top.
How can I achieve this without changing the contents of the div or having to differ between labels for inputs/textareas and divs? Is there any way to force an invisible baseline to be at the top of a table cell?
Maybe I'm not approaching the problem from the right side, any insight is appreciated.
Use the code below for your problem:
td, label, textarea {
vertical-align: top;
}