Align bottom of floated text

Question

I'm trying to design a table-free input form. I'm gradually making my way through it was I learn new things about CSS. But I can't figure out how to get my smaller validation text to align to the bottom of the field's label text.

<div style="width:275px">
    <div style="width:175px">
        <label style="float:left;">Label</label>
        <span style="float:right; font-size:x-small; color:#FF0000;">Required</span>
        <input type="text" style="display:block; clear:both; width:100%" />
    </div>
</div>

This displays the "Label" over the top left of the textbox and "Required" over the top right. But the span containing "Required" is smaller font and it seems to be anchored to the top right corner so the text is aligned higher than the bottom of the "Label" text. How do I make the bottoms align?

Answer 1

There are a couple different ways, but I've found this one to be the most efficient

<div style="width:275px">
    <div style="width:175px">
        <div style="position:relative; height: 2em;">
            <label style="position:absolute; left: 0; bottom: 0;">Label</label>
            <span style="position:absolute; right: 0; bottom: 0; font-size:x-small; color:#FF0000;">Required</span>
        </div>
        <input type="text" style="display:block; clear:both; width:100%" />
    </div>
</div>

This will also save you from needing to clear everything.

Answer 2

您可以将margin-top:5添加到“必填”