title: CSS trick to display multiple divs
body: <p>I want to separate my window in 2 equal parts, same height but width is 50% for each.</p>
  
  <p>So I used this</p>
  
  <pre><code>.container {
      display: flex;
      height : 100%;       
  }
  
  .column {
      flex: 1;
      height : 100%;
  }
  
  .column-one {
      order: 1;
  
  }
  .column-two {
      order: 2;        
  }
  </code></pre>
  
  <p>My html is structured like this</p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div class="column column-one"&gt; Column 1
      &lt;div  class="x" id="sliceX" &gt;&lt;/div&gt;
      &lt;div  class="y" id="sliceY"&gt;&lt;/div&gt;
      &lt;div  class="z" id="sliceZ"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="column column-two"&gt; Column 2
      &lt;div  class="x" id="sliceX2"&gt; &lt;/div&gt;
      &lt;div  class="y" id="sliceY2"&gt;&lt;/div&gt;
      &lt;div  class="z" id="sliceZ2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is working well.</p>
  
  <p>Now I want that my <code>.x</code> will take 100% of width but 50% of height. <code>.y</code> and <code>.z</code> will be displayed just after. Both taking 50% of height(the rest). But each class will only take 50% of width so <code>.y</code> will be displayed on the left and <code>.z</code> on the right</p>
  
  <p>Like this:</p>
  
  <pre><code>Col1 Col2
  xxxx xxxx
  xxxx xxxx
  yyzz yyzz
  yyzz yyzz
  </code></pre>
  
  <p>How can I structure my css get this working with my actual separation in 2 columns ?</p>