How can I position nested lists side-by-side?

Question

My fiddle: https://jsfiddle.net/a1g49g2t/7/

I want the ol and ul items to be next to eachother. Is this possible?

Structure:

<ol class="level1">
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>
    <ul class="level2">
      <li>item2</li>
      <li>item2</li>
      <li>item2</li>
      <li>item2</li>
      <li>item2</li>
      <li>
        <ul class="level3">
          <li>item3</li>
          <li>item3</li>
          <li>item3</li>
          <li>item3</li>
        </ul>
      </li>
    </ul>
  </li>
</ol>

Answer 1

ol ul {
    position: absolute;
    left: 200px;
    top: 0;
    background: #aaa;
}

Demo

Note that the top-level list could be positioned relatively for easier page layout. It doesn't matter as long as it's not left at the default (static).