title: How do I make <li> with block elements sit beside each other?
body: <p>I have a mockup layout for something <a href="http://www.mylittlepwnage.com/misc/forms-editor.html" rel="nofollow noreferrer">here</a>. Essentially there are sections, columns and fields, which are all written as a combination of <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> elements. This is done specifically for later parsing. </p>
  
  <p>A snippet of the HTML:</p>
  
  <pre><code>&lt;li class="layout"&gt;&lt;span class="type"&gt;[Column] &lt;/span&gt;
      &lt;ul class="layout-children"&gt;
          &lt;li class="field"&gt;&lt;span class="type"&gt;[Text] &lt;/span&gt;A field&lt;/li&gt;
          &lt;li class="field"&gt;&lt;span class="type"&gt;[Text] &lt;/span&gt;Another field&lt;/li&gt;
          &lt;li class="field"&gt;&lt;span class="type"&gt;[Text] &lt;/span&gt;Yet another field&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="layout"&gt;&lt;span class="type"&gt;[Column] &lt;/span&gt;
      &lt;ul class="layout-children"&gt;
          &lt;li class="field"&gt;&lt;span class="type"&gt;[Text] &lt;/span&gt;More fields&lt;/li&gt;
          &lt;li class="field"&gt;&lt;span class="type"&gt;[Text] &lt;/span&gt;And one more field&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>If you go to the <a href="http://www.mylittlepwnage.com/misc/forms-editor.html" rel="nofollow noreferrer">linked content</a> you'll note that those columns sit vertically.
  I want the columns to sit beside each other, but I am not sure how to go about it.</p>
  
  <p>It would be preferable if the HTML didn't change, just the CSS.</p>