how to make this design with flexbox css?

Question

I am trying to make the design below with flexbox how would I do it?

Answer 1

Create a container and dive it into 2 half using flex.

Create the first half and divide it into 2 half of the 8:2 ratio again using it flex in the child flex-elements.

.container {
  display: flex;
  gap: 1rem;
}

.box {
  height: 200px;
  flex: 1;
  background-color: blue;
}

.box1 {
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.internal-box1 {
  flex: 8;
  background-color: blue;
}

.internal-box2 {
  background-color: blue;
  flex: 2;
}

<div class="container">
  <div class="box box1">
    <div class="internal-box1"></div>
    <div class="internal-box2"></div>
  </div>
  <div class="box"></div>
</div>

Answer 2

Try something like this:

<div style="
    height: 250px;
    width: 100%;
    display: flex;
"><div style="
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-right: 20px;
"><div style="
    flex: 1;
    background-color: paleturquoise;
    margin-bottom: 20px;
"></div><div style="
    height: 40px;
    background: blue;
"></div></div><div style="
    flex: 1;
    background: teal;
"></div></div>