Always center form and line up inputs, regardless of label length - html

Question

I'm trying to build out a form module so that regardless of the various inputs a form may have, the following conditions are always met:
The form is centered within its containing element. (I think this is just inline-block combined with text-align: center.)
The inputs are all the same width and line up along their left edge.
The labels can be any length (within reason), and their right edges all line up.
The form is only as wide as its longest label/input combination (in other words, the width of the form is dynamic and determined by its longest label). (The red lines in the image below represent the bounding edges of the form as per the given labels and inputs.)
Basically, I want something like the following:
This type of layout is really easy to do with tables, but I have read that tables are not advisable to use for forms, so my question is, how can I do all of this without using a table?
Thank you.
Edit: The layout must work in IE8.

Answer 1

You can accomplish the required behavior using flex.
HTML structure (it's just an approach):
<div id="container">
<div class="form-container">
<form>
<div class="column">
<label for="text1">This is a label</label>
<label for="text2">Label</label>
<label for="text3" style="flex-grow:2;">Another larger label :D</label>
<label for="text4">A short one!</label>
</div>
<div class="column">
<input type="text" name="text1" />
<input type="text" name="text2" />
<textarea name="text4" style="flex-grow:2;"></textarea>
<input type="text" name="text3" />
</div>
</form>
</div>
</div>
CSS:
#container {
text-align: center;
}
#container .form-container {
display: inline-block;
}
#container form {
background: #eee;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 20px;
}
#container form .column {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
#container form .column label {
padding: 2px;
text-align: right;
}
#container form .column input,
#container form .column textarea {
align-self: flex-start;
width: 200px;
}
Here is a working demo: http://jsfiddle.net/gopafm4g/2/