title: Display flexbox both side by side and up and down
body: <p>I have this structure:</p>
  <pre><code>&lt;div class=&quot;quizForm&quot;&gt;
      &lt;div class=&quot;quizQuestions&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;quizQuestions&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;quizQuestions&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;quizImage&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>the &quot;quizQuestions&quot; after the first are hidden, and appear when the user go to the next question.</p>
  <p>What I want to achieve is this:
  <a href="https://i.stack.imgur.com/yln94.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yln94.png" alt="enter image description here" /></a></p>
  <p>Where the quizQuestions are in columns and the quizImage is on the right side.</p>
  <p>I have:</p>
  <pre><code>.quizForm{
    display: flex;
  }
  
  .quizQuestions{
    flex: 1;
    flex-direction: row;
  }
  
  .quizImage{
    flex: 2;
  }
  </code></pre>
  <p>But in that way the quizQuestions too go side by side.</p>