title: How do I split a single UL into a two column layout without changing the HTML?
body: <p>I have this markup from a CMS, which I cannot change. The only thing I could do is add custom classes to every li. With these limitations I need to accomplish a particular layout. Here is my current markup:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="sub-menu"&gt;
    &lt;li&gt;&lt;a&gt;something&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;something&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;something&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;something&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;something&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;something&lt;/a&gt;&lt;/li&gt;
    
    &lt;li class="somestuff"&gt;some markup&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I get with my current CSS is:
  <a href="https://i.stack.imgur.com/IqFtR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IqFtR.png" alt="enter image description here"></a></p>
  
  <p>What I need to accomplish is:
  <a href="https://i.stack.imgur.com/bfkEp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bfkEp.png" alt="enter image description here"></a></p>
  
  <p>Is this possible using flexbox or something on .sub-menu ?</p>
  
  <p>Edit: I've made a codepen so it's easier to understand - <a href="https://codepen.io/anon/pen/ZRGxNE" rel="nofollow noreferrer">https://codepen.io/anon/pen/ZRGxNE</a>
  I need the green block on the right :)</p>