title: Flexbox - Two column in a row
body: <p>I'm trying to use flexbox in order to create two columns of three row for the Products. I looked to other similar problem on StackOverflow but the answers given didn't work for me. Could you help me please ?
  Here the HTML code:</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-css lang-css prettyprint-override"><code>Informations {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 1px solid blue;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  
  .Information {
    border: 1px solid blue;
    margin: 0.5em;
    padding: 0.5em;
  }
  
  Game {
    list-style-type: none;
    border: 1px solid red;
    width: 100%;
    display: flex;
  }
  
  .ProductContainer {
    display: flex;
    flex-flow: column wrap;
    border: 1px solid black;
    width: 90%;
  }
  
  .Product {
    border: 1px solid red;
    margin: 0.5em;
    padding: 0.5em;
  }
  
  .UpgradeContainer {
    border: 1px solid black;
    width: 10%;
  }
  
  .Upgrade {
    display: flex;
    flex-flow: column wrap;
    border: 1px solid red;
    margin: 0.5em;
    padding: 0.5em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE world&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt; World &lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;Informations&gt;
      &lt;div class="Information"&gt;Your World:&lt;/div&gt;
      &lt;div class="Information"&gt;Your Money:&lt;/div&gt;
      &lt;div class="Information"&gt;Your ID:&lt;/div&gt;
    &lt;/Informations&gt;
    &lt;Game&gt;
      &lt;div class="UpgradeContainer"&gt;
        &lt;div class="Upgrade"&gt;Unlocks&lt;/div&gt;
        &lt;div class="Upgrade"&gt;Cash&lt;/div&gt;
        &lt;div class="Upgrade"&gt;Angels&lt;/div&gt;
        &lt;div class="Upgrade"&gt;Managers&lt;/div&gt;
        &lt;div class="Upgrade"&gt;Investors&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ProductContainer"&gt;
        &lt;div class="Product"&gt;Product1&lt;/div&gt;
        &lt;div class="Product"&gt;Product2&lt;/div&gt;
        &lt;div class="Product"&gt;Product3&lt;/div&gt;
        &lt;div class="Product"&gt;Product4&lt;/div&gt;
        &lt;div class="Product"&gt;Product5&lt;/div&gt;
        &lt;div class="Product"&gt;Product6&lt;/div&gt;
      &lt;/div&gt;
    &lt;/Game&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I basically want to have to the left my upgrades (Cash, angels...) and in the middle and right two column of three row of products. 
  Here is my code pen to see: <a href="https://codepen.io/Tameiki/pen/oNXpNVe" rel="nofollow noreferrer">https://codepen.io/Tameiki/pen/oNXpNVe</a></p>