title: ul li tag position
body: <p>I have two sets of lists with headings which need to display side-by-side as in the following image:</p>
  
  <p><img src="https://i.stack.imgur.com/1FjwD.jpg" alt="enter image description here"></p>
  
  <p>Here's my html:</p>
  
  <pre><code>&lt;h2&gt;Pages&lt;/h2&gt;
  &lt;ul class="one"&gt;
       &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=""&gt;Archives&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=""&gt;Archives&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h2&gt;Pages&lt;/h2&gt;
  &lt;ul class="two"&gt;
      &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Archives&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Archives&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I can't make any changes to the html. I have to accomplish this using css only.</p>
  
  <p>Please refer to the fiddle:
  <a href="http://jsfiddle.net/Pxtvh/" rel="nofollow noreferrer">http://jsfiddle.net/Pxtvh/</a></p>