title: How do i achieve the layout below in flex - css
body: <p>We have a flex container containing 5 boxes and i was asked to displayed them like the image below. </p>
  
  <p><img src="https://i.imgur.com/mtEq0Hh.png" /></p>
  
  <p>I was able to achieve similar layout by placing another two containers  inside the parent container. like below.</p>
  
  <p>as discussed and answered <a href="https://stackoverflow.com/questions/36911248/how-to-shrink-flex-items-height-to-fit-container-heights/36911397#36911397"> Here </a>. However, considering the project is existing , that is said to have introduced a lot of complexity that that when we adopt , would force changes in the structure of our js classes. I am now tasked with achieving the same by placing them in one single container.</p>
  
  <pre><code>.layout-5-3 {
      flex-direction: row;
      display: flex;
  }
  
  .layout-5-3 &gt; div:nth-child(1) {
      flex-basis: 48%;
  }  
  
  .layout-5-3 &gt; div:nth-child(2),
  .layout-5-3 &gt; div:nth-child(3),
  .layout-5-3 &gt; div:nth-child(4),
  .layout-5-3 &gt; div:nth-child(5) {
      flex-basis: 48%;
      flex-direction: column;
  }  
  </code></pre>
  
  <p>and in my html</p>
  
  <pre><code>&lt;div class="layout-5-3"&gt;
    &lt;div class="box"&gt;Box1&lt;/div&gt;
    &lt;div class="box"&gt;Box2&lt;/div&gt;
    &lt;div class="box"&gt;Box3&lt;/div&gt;
    &lt;div class="box"&gt;Box4&lt;/div&gt;
    &lt;div class="box"&gt;Box5&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I was expecting my first child to the placed on the left and the remaining four occupying the other half space. Considering my basis above. Please is there any way i can achieve this without introducing another flex container inside the parent container ? Any help would be appreciated.</p>