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

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;}