Why is Flex Wrap ignoring the empty space?

I am attempting to create a scheme where I have a big vertical div of 2h height with a big horizontal div next to it in the first h of height and then in the second h of height I’d like to have another smaller div. I’d like it to look like so:

But unfortunately all I am capable of achieving is this:

I am unsure of why the third div is being positioned below the first rather than besides it.

Some additional rules I am unfortunately incapable of applying in my actual case:

• I cannot wrap any of the div’s individually in another container
• I cannot use absolute positioning since in my actual use case I am generating the divs dynamically.

Here is the simple example I reproduced.

.container {
  display: flex;
  flex-wrap: wrap;
}

.first {
  background-color: #0afc12;
  flex-basis: 33%;
  height: 400px;
}

.second {
  background-color: #17cfe3;
  flex-basis: 66%;
  height: 200px;
}

.third {
  background-color: #fcba03;
  flex-basis: 33%;
  height: 200px;
}

<div class="container">
  <div class="first">a</div>
  <div class="second">b</div>
  <div class="third">c</div>
</div>

>Solution :

.first is considered to be on the same "row" as .second whereas .third is on a second, unrelated "row".

In these day, you can use grid, which is both nice and clean:

.container {
  /* a spans two rows, b spans two columns */
  /* dot means nothing occupies that cell. */
  grid-template-areas:
    'a b b'
    'a c .';
  height: 400px;
}

/* Set identifier for each */

.first {
  grid-area: a;
}

.second {
  grid-area: b;
}

.third {
  grid-area: c;
}

Try it:

.container {
  grid-template-areas:
    'a b b'
    'a c .';
  height: 400px;
}

.first {
  grid-area: a;
}

.second {
  grid-area: b;
}

.third {
  grid-area: c;
}

/* Original styles */

.container {
  display: grid;
}

.first {
  background-color: #0afc12;
}

.second {
  background-color: #17cfe3;
}

.third {
  background-color: #fcba03;
}

<div class="container">
  <div class="first">a</div>
  <div class="second">b</div>
  <div class="third">c</div>
</div>