title: flex box layout combine three elements in one column
body: <p>my issue is in image: <a href="https://i.stack.imgur.com/BhADi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BhADi.png" alt="issue"></a></p>
  
  <p>a need to arrange three small elements in one column besides big one.</p>
  
  <p>sample html:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="big_element"&gt;&lt;/div&gt;
      &lt;div class="small_element"&gt;&lt;/div&gt;
      &lt;div class="small_element"&gt;&lt;/div&gt;
      &lt;div class="small_element"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>.container {
      display: flex;
      flex-direction: row; width: 496px;
  }
  .big_element, .small_element {
      display: flex;
      width: 248px;
  }
  </code></pre>