Dynamic auto input text width with css - html

Question

I am not sure how easy this is, but because I usually code in php and output the html, I can do any calculations from there
The problem:
I have a simple form, and I want the input text fields to start right after the labels, but end at the same position. i.e. have a max of date of birth, and then expand everyone up to there
I tried some things with max-width/min-width and width but nothing seems to work
.input_field {
max-width:150px;
width:100%;
}
I would prefer a non javascript solution if possible!

Answer 1

An example using FlexBox: you could also set a width (or min/max-width to the form element (or to ul element)
Codepen: http://codepen.io/anon/pen/oXdbab
HTML
<form>
<ul>
<li>
<label>Label regular</label>
<input type="text" />
</li>
<li>
<label>Label2 really really longer</label>
<input type="text" />
</li>
<li>
<label>Label</label>
<input type="text" />
</li>
</ul>
</form>
CSS
form ul {
list-style: none;
margin: 20px 0; padding: 0;
max-width: 500px;
}
form li {
display: flex;
margin: 10px 0 0 0;
}
form input {
margin-left: 2em;
flex-grow: 1;
}
Result
Final note: Flexbox module is not supported on IE<10. but, on those browser only, you may use a script inside a conditional comment, e.g.
<!--[if lte IE 9]>
<script>
...
</script>
<![endif]-->