How can I place two divs in one row of a vertically sorted flex div?
<p>Here is my code snippet:</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>.container {
  display: flex;
  flex-direction: column;
}
.container &gt; div {
  padding: 20px;
  color: #fff;
  margin: 5px;
  text-align: center;
  font-size: 30px;
}
.fruits {
  order: 2;
  background: #ff5423;
}
.container :not(.fruits) {
  order: 1;
}
.flowers {
  background: #f970bd;
}
.trees {
  background: #049500;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="fruits"&gt;The fruits&lt;/div&gt;
  &lt;div class="flowers"&gt;The flowers&lt;/div&gt;
  &lt;div class="fruits"&gt;The fruits&lt;/div&gt;
  &lt;div class="trees"&gt;The trees&lt;/div&gt;
  &lt;div class="fruits"&gt;The fruits&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I am putting all <code>.fruits</code> div in the bottom using <code>flex-direction: column;</code>. There are two other divs <code>.flowers</code> and <code>.trees</code> which can be placed randomly anywhere inside <code>.conatiner</code> and I can't handle that. I want them to take half of its parent width so they take only one row.</p>

<p><em>What I want to achieve:</em>
<a href="https://i.stack.imgur.com/9G6Mx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9G6Mx.jpg" alt="enter image description here"></a></p>

<p>Giving 50% width will not work here. I know the rule says the direction is column-wise, however, I still hope if there is any available method/trick to do so! Any other workaround using different technique rather than using flex will also help.</p>