title: Inline & Block Form Inputs together
body: <p>I'm trying to give my form a layout like the one shown on this image <a href="http://reversl.net/demo/" rel="nofollow">http://reversl.net/demo/</a> where the firstname and surname inputs are inline but all other inputs are stacked (i.e. on top of each other). I currently have something like this <a href="http://reversl.net/form/" rel="nofollow">http://reversl.net/form/</a> using the following markup;</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;form&gt;
  &lt;ol&gt;            
    &lt;li&gt;
      &lt;label for=name&gt;Firstname:&lt;/label&gt;
      &lt;input id=name name=name type=text placeholder="Jon" required autofocus&gt;
    &lt;/li&gt;
  
    &lt;li&gt;
      &lt;label for=name&gt;Surname:&lt;/label&gt;
      &lt;input id=surname name=surname type=text placeholder="Doe" required autofocus&gt;
    &lt;/li&gt;
  
    &lt;li&gt;
      &lt;label for=message&gt;Message:&lt;/label&gt;
      &lt;textarea id=message name=message placeholder="Type your message here..." required&gt;&lt;/textarea&gt;
    &lt;/li&gt;
  
  &lt;/ol&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Styled as follows;</p>
  
  <pre><code>label {
  display: block;
  line-height: 1.75em;
  }
  
  input, textarea {   
  width: 250px;
  display: inline-block;
  margin-bottom: 2em;
  padding: .75em .5em;
  color: #999;
  border: 1px solid #e9e9e9;
  outline: none;
  }
  
  input:focus, textarea:focus {
  -moz-box-shadow:    inset 0 0 3px #aaa;
  -webkit-box-shadow: inset 0 0 3px #aaa;
  box-shadow:         inset 0 0 3px #aaa;
  }
  
  textarea {
  height: 100px;
  }
  </code></pre>