title: Best way to arrange labels and inputs side-by-side
body: <p>Without the use of tables or <code>display:table</code>, 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:</p>
  
  <pre><code>short_label   input_box____________________
  tiny_label    input_box____________________
  medium_label  input_box____________________
  </code></pre>
  
  <p>And then also handle larger labels accordingly:</p>
  
  <pre><code>short_label            input_box__________
  medium_label           input_box__________
  very_extra_long_label  input_box__________
  </code></pre>
  
  <p>But I <strong>do not want</strong>:</p>
  
  <pre><code>short_label            input_box__________
  tiny_label             input_box__________
  medium_label           input_box__________
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;div class='aligned_form'&gt;
  
    &lt;label for='a'&gt;short_label&lt;/label&gt;
    &lt;input type='text' id='a'&gt;
  
    &lt;label for='b'&gt;medium_label&lt;/label&gt;
    &lt;input type='text' id='b'&gt;
  
    &lt;label for='c'&gt;very_extra_long_label&lt;/label&gt;
    &lt;input type='text' id='c'&gt;
  
  &lt;/div&gt;
  </code></pre>