title: Inline form, shrink to fit labels to the left
body: <p>The title says labels because that's my use case, but obviously it could be any element. What I'm trying to achieve is the following form layout:</p>
  
  <pre><code>        [label] [input]
  [another label] [input]
    [third label] [input]
  </code></pre>
  
  <p>Currently my HTML roughly looks like (leaving out the details):
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      overflow: auto;
  }
  label, input {
      float: left;
  }
  label {
      text-align: right;
      width: 200px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;label&gt;Label&lt;/label&gt; 
      &lt;input type="text"&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Another label&lt;/label&gt; 
      &lt;input type="text"&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;Third label&lt;/label&gt; 
      &lt;input type="text"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  However, the design requires me to shrink the labels to fit the tallest one, so I can't use a fixed width. I need the longest label to exactly fit between the left side of the screen and the input, and all the other labels should get that width too.</p>
  
  <p>What I'm looking for is the best method to implement this layout while keeping the HTML as semantic as realistically possible (an extra div here or there isn't a problem, I use them now for a lot easier control over the vertical alignment and also some minor styling). Currently my text inputs happen to be the same size, but there's also some groups of radios/checkboxes that would have to reside in the <code>[input]</code> section.</p>
  
  <p>Also, I'd like to keep my options open for the use of media queries to apply some RWD elements. This isn't a big requirement for this specific project, but you never know. Oh, and I have to support IE as low as 9, unfortunately.</p>
  
  <p>How would I address these issues in a semantically correct (i.e. not using tables) way that is supported by IE9 and IE10?</p>