Aligning grid based form elements and their labels

Question

we have a requirement where form elements are laid out in 3 separate columns. The labels can have varying amounts of text and the form elements will be mainly input boxes and te

Answer 1

Here is the fiddle: http://jsfiddle.net/nJZ6Y/19/

You have to add a span inside each label, then add these CSS rules.

label {
    min-height: 3em;
}

label span {
    vertical-align: -3em;
    display: inline-block;
}

Answer 2

Fiddle: http://jsfiddle.net/nJZ6Y/18/

I added a box around the label element and aligned it to the bottom. This only works if you know the approximate max-height of the text though. If the text goes longer than that it will fall out of the container and go incognito. Fred's answer is more elegant. FYI: Bonorum in your lorem ipsum is a funny word...

    .label-box {
        position: relative;
    }
    .label-box {
        height: 50px;
    }
    label { 
        float:left; 
        width:100%; 
        color:#fff; 
        position: absolute; 
        bottom: 0; 
        left: 0;}