JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="full-width"></div>
  <div class="element-one"></div>
  <div class="element-two"></div>
</section>

CSS

section {
  align-items: center;
  background-color: #333;
  display: flex;
  flex-flow: row wrap;
  height: 200px;
}

.full-width {
  background-color: palegreen;
  flex: 0 0 100%;
  height: 50px;
}

.element-one,
.element-two {
  flex: 0 0 50%;
  height: 50px;
}

.element-one {
  background-color: palevioletred;
}

.element-two {
  background-color: palegoldenrod;
}