Vertical-alignment of inline-block elements inside a block element - vertical-alignment

Question

Please find my fiddle here, I'm trying to understand the logic behind the vertical-alignment of the inline-block elements (div.lbl) within div.panel.
<style>
label, .lbl {
width:292px;
display:inline-block;
/* text-align:left; */
}
.val {
display:block;
}
.panel {
border-bottom: 1px dashed red;
}
.lbl {
color: magenta;
}
label {
color:black;
}
</style>
<div class="panel">
<div class="lbl" for="firstname">First name:
<INPUT class="val" type="text" id="firstname" />
</div>
<div class="lbl" for="description">Long field name Long field name Long field name Long field name Long field name Long field name Long field name:
<textarea rows="5" cols="25" class="val" id="description" ></textarea>
</div>
<div class="lbl" for="lastname">Long Last name Long Last name Long Last name
<INPUT class="val" type="text" id="lastname" />
</div>
</div>
<div class="panel">
<div class="lbl" for="firstname1">Long First name Long First :
<INPUT class="val" type="text" id="firstname1" />
</div>
<div class="lbl">First name:
<textarea rows="5" cols="25" class="val" id="description1"></textarea>
</div>
<div class="lbl">Long field name Long field name Long field name Long field name Long field name:
<fieldset class="bank-address">
<label for="address1">Bank Address Line 1</label>
<input type="text" value="" id="address1" name="address1" maxlength="9" />
<label for="address1">Bank Address Line 2</label>
<input type="text" value="" id="address2" name="address2" maxlength="9" />
<label for="address1">Bank Address Line 3</label>
<input type="text" value="" id="address3" name="address3" maxlength="9" />
<label for="address1">Bank Address Line 4</label>
<input type="text" value="" id="address4" name="address4" maxlength="9" />
</fieldset>
</div>
</div>
If you notice, all label texts (in magenta) are vertically aligned bottom and their respective field elements are vertically aligned top such that the bottom of the texts are aligned in same line and the top of the field elements seem to have aligned in the same line. (Click here to see the display of the fiddle page) This is the alignment I'm trying to achieve and works in Firefox, Chrome & Safari. But looks different in all IEs.
In IE, it seems all div.lbl to have vertical-aligned bottom.
Is there a way I can bring the same effect in IE too ?
Thanks.

Answer 1

You can get the effect you want by adding a div element around the input boxes and then setting the elements with class "val" to float:left. Also do the same for the fieldset and give it class "val".
The added div causes the input elements to start on a new line, and the float takes the input element out of the flow, leaving the last line of text in each inline-block box to be used as the baseline for that box.
See http://jsfiddle.net/DaZWW/