How can I place two divs on the same line of a vertically sorted flex div?

Question

Here is my code snippet:

.container {
  display: flex;
  flex-direction: column;
}
.container > 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;
}

<div class="container">
  <div class="fruits">The fruits</div>
  <div class="flowers">The flowers</div>
  <div class="fruits">The fruits</div>
  <div class="trees">The trees</div>
  <div class="fruits">The fruits</div>
</div>

Run codeHide result

I put all the .fruitsdivs at the bottom using flex-direction: column;. There are two more divs .flowersand .treesthat can be randomly placed anywhere inside .conatiner, and I cannot handle this. I want them to take half of their parent width, so they only take one line.

What I want to achieve:

Providing 50% of the width will not work here. I know that the rule says that the direction is in columns, however, I still hope that there is some method / trick available! Any other workaround using a different technique, rather than using flex, would also help.

Answer 1

flex-direction: row, flex-wrap: wrap flex: 0 0 50% , .

* {box-sizing: border-box} paddings calc() .

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.container > div {
  padding: 20px;
  color: #fff;
  margin: 5px;
  flex: 0 0 calc(100% - 10px);
  text-align: center;
  font-size: 30px;
}
.fruits {
  order: 2;
  background: #ff5423;
}
.container div:not(.fruits) {
  order: 1;
  flex: 0 0 calc(50% - 10px);
}
.flowers {
  background: #f970bd;
}
.trees {
  background: #049500;
}

<div class="container">
  <div class="fruits">The fruits</div>
  <div class="flowers">The flowers</div>
  <div class="fruits">The fruits</div>
  <div class="trees">The trees</div>
  <div class="fruits">The fruits</div>
</div>

Hide result