title: using flexbox on ul (next to eachother)
body: <p>I'm trying to use flexbox on my <code>&lt;ul&gt;</code> so I can align them next to eachother. When I use this <code>display:flex; flex-direction: row;</code> on my <code>&lt;ul&gt;</code> it will also effect the child (in this case all the <code>&lt;li&gt;</code>)</p>
  
  <p>I tried giving the <code>&lt;li&gt;</code> a <code>display:flex;</code> aswell and <code>flex-direction: column;</code> but this did not help.</p>
  
  <p>How can I achieve what I'm trying to do here?
  Look at my <a href="https://jsfiddle.net/n170zfLw/" rel="nofollow noreferrer">jsFiddle</a> for a demo.</p>