Without the use of tables or display:table, is it possible to have a flexible width area for labels to the left of inputs? I would also like to avoid grid layout for browser compatibility reasons. I'd like css to take care of this:
short_label input_box____________________
tiny_label input_box____________________
medium_label input_box____________________
And then also handle larger labels accordingly:
short_label input_box__________
medium_label input_box__________
very_extra_long_label input_box__________
But I do not want:
short_label input_box__________
tiny_label input_box__________
medium_label input_box__________
So the first column needs to have a flexible width, and the second column needs to grow to fill space. My html would ideally look something like this, but if necessary, "row" divs can be added. I feel like there is a flex answer, but maybe not since all the rows needs to be aligned.
<div class='aligned_form'>
<label for='a'>short_label</label>
<input type='text' id='a'>
<label for='b'>medium_label</label>
<input type='text' id='b'>
<label for='c'>very_extra_long_label</label>
<input type='text' id='c'>
</div>