Hi all

I've been given a design by a graphic designer, which I'm trying to put into HTML and CSS.

One of the issues I'm facing is on a user input form. In the design the labels for each input are a fixed width - say 100px. The container for each label/input pair is fixed at 2em. The design I've been given has asked that the text for each label is vertically aligned. So the structure is like this:

<containerTag>
    <label />
    <input />
</containerTag>

No problems as long as the text is on one line (I would have just used line-height of 2em to match the container), but some of the text in the labels are wrapping to two or even lines.

Is there a semantic and nice way to get around this problem?

I need something that will work in IE6-9, Firefox 3.5+, Chrome and Safari. Although I am using progressive enhancement, so if there is a solution that will only work on the later browsers, but won't break the older ones, then this would be acceptable.

Any help gratefully received!

Thanks for your time
S