How to align flexbox items like in a table?

Question

HTML

There is a three column layout built on flexbox. All columns are generated via PHP and have the following structure:

<div class="flex-container">
<div class="flex-inner"></div>
<div class="flex-inner"></div>
<div class="flex-inner"></div>
</div>

How to align flex-inner items as shown in the image without adding any parents? With a table, this is easy to do, but how to do it with flexbox without adding unnecessary elements.

Answer 1

Styles can be written inline, or you can set blocks by class and twist-twist them as you like.
Link to the sandbox. There you can sip the window and check the rubberiness. In the example, the width and height of the container are each 100 viewport units for illustration purposes only. In your case, they may be different.
And code, in case the sandbox dies.

<div class="flex-container">
    <div class="flex-inner first"></div>
    <div class="flex-inner second"></div>
    <div class="flex-inner third"></div>
  </div>

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;
}
.flex-inner {
  display: flex;
}
.first {
  background-color: orange;
  width: 65%;
  height: 100%;
}

.second {
  background-color: green;
  width: 35%;
  height: 50%;
}

.third {
  background-color: yellow;
  width: 35%;
  height: 50%;
}

I highly recommend checking out this and other flexbox guides. Good to know even if you are a backender