JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="big"></div>
  <div class="sub">
    <div class="heading"></div>
    <div class="stuff">
      <div></div>
      <div></div>
    </div>
  </div>
</div>

<div class="row">
  <div class="sub">
    <div class="heading"></div>
    <div class="stuff">
      <div></div>
      <div></div>
    </div>
  </div>
    <div class="big"></div>
</div>

CSS

.row div {
  box-sizing: border-box;
}

.row {
  display: flex;
  margin-bottom: 15px;
}

.big,
.sub {
  flex-basis: 50%;
}

.big {
  height: 400px;
  background: tomato;
  margin: 5px;
}

.sub {
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.sub .heading,
.sub .stuff div {
  background: gray;
}

.heading {
  height: 160px;
  margin-bottom: 5px;
}

.sub .stuff {
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  justify-content: space-between;
}

.sub .stuff div {
  flex-basis: calc(50% - 5px);
}

@media (max-width: 400px) {

  .row,
  .sub,
  .sub .stuff {
    display: block;
  }

  .stuff div {
    height: 200px;
    margin-bottom: 5px;
  }
}