JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex">
  <div class="flex-child one"></div>
  <div class="flex-child two"></div>
  <div class="flex-child three"></div>
</div>

CSS

.flex {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items:flex-start;
  align-content:flex-start;
}

.flex-child {
  height: 200px;
}

.one {
  width: 70%;
  height: 100px;
  background-color: #bada55;
}

.two {
  width: 30%;
  background-color: #f00;
}

.three {
  width: 70%;
  background-color: #0f0;
}