CSS and alignment of input labels against tables

Question

This is what I am trying to accomplish:

First Name: Textbox 
Last Name: Textbox 
... 
more labels with unknown widths: more text boxes

• Using a table that you can easily execute,
• Using CSS is also very easy, as long as you somehow specify the width of the label (either as a percentage or in hard encoding)
• Using jquery to recalculate the maximum width and assign it to all shortcuts is also easy

Problem None of the above is elegant.

I need generic CSS, which I can use on all my sites, where I can display an ordered group of labels for my inputs, and if later the text for one of my labels has changed, I do not need to relocate all my code to change the darn width value

Sort of:

<div class="labelInputArea">
    <label for="userName" class="lable">User Name:</label>
    <input name="userName" type="text" value="" />
</div>
<div class="labelInputArea">
    <label for="password" class="lable">Password:</label>
    <input name="password" type="text" value="" />
</div>
<div class="labelInputArea">
    <label for="longText" class="lable">Some Long Label:</label>
    <input name="longText" type="text" value="" />
</div>

and in my .css I would like something like:

.labelInputArea 
{
    display:block;
}
.labelInputArea .label
{
    text-align:right;
    display:inline;
}

.labelInputArea input
{
    text-align:left;
    display:inline;
}

Answer 1

, , , , . CSS table-row/table-cell:

.labelInputArea 
{
    display:table-row;
}
.labelInputArea label
{
    text-align:right;
    display:table-cell;
}

.labelInputArea input
{
    text-align:left;
    display:table-cell;
}

: http://jsfiddle.net/x5c8N/

, , , , ,

.labelInputArea 
{
    display:block;
    padding-top:5px;
}
.labelInputArea label
{
    width:150px;
    display:inline-block;
}

.labelInputArea input
{
    vertical-align:top;
}

http://jsfiddle.net/n4xzF/1/

, , :)

Answer 2

, . , . , , , -. :

.labelInputArea .lable
{
  width: auto !important;
}

! important .