title: Flexbox - Align 2 items in a row and third item next row full width
body: <p>I am three items in a row. I want to keep first two items 50% 50% of the row and push the next third item to the next row and cover the 100% of the row.</p>
  
  <pre><code> .container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
  }
  
  .div1, .div2 {
    flex: 0 0 50%;
  }
  .div3{ 
    flex: 1;
  }
  </code></pre>
  
  <p>html markup</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="div1"&gt;&lt;/div&gt;
    &lt;div class="div2"&gt;&lt;/div&gt;
    &lt;div class="div3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want is first two elements lined together in one row and third element pushed to next row covering 100%;</p>