title: CSS Grid System for Forms (with Inline Labels)
body: <p>This is a <a href="https://stackoverflow.com/questions/1775532/css-grid-system-for-forms-multi-column"><strong>follow up to this question</strong></a>, I'm trying to have the same multi-column format but with inline labels instead of block labels, take the following mockup for instance:</p>
  
  <p><a href="https://i.stack.imgur.com/jlrKv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jlrKv.png" alt="mockup with inline labels"></a>
  </p>
  
  <p>It's not very clear in the image but the <code>name (label)</code> + <code>name (input)</code> should occupy 50% (or near that) of the container width, the same goes for the <code>email label + input</code>, while the <code>country (label)</code> + <code>country (select)</code> should occupy 100% of the width.</p>
  
  <p>I would like to have the same HTML / CSS used in the question mentioned above and change the appearance of the form by stylizing label elements with a class <code>inlineLabel</code> or <code>blockLabel</code>.</p>
  
  <p>Is this possible?</p>
  
  <p><strong>PS: I'm sorry for being such a pain in the ass but form UIs is probably the most complex and important aspect of a web application one should care about, the whole set of form elements is also one of the most complex to stylize and I would like to put a end to this headache by creating a simple CSS "framework" to stylize forms in a simple manner.</strong></p>