JSFiddle - React, Tailwind, and code Playground

HTML

<div class=main>
  <div class=top>top</div>
  <div class=left>left</div>
  <div class=right>right</div> 
</div>

CSS

.main {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
}
.top {
  background-color: red;
  flex: 1 100%;
}
.left {
  background-color: green;
  flex: 1 0 0;
}
.right {
  background-color: blue;
  flex: 1 0 0;
}