JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <span class="header">Header</span>
  <span class="first">First</span>
  <span class="second">Second</span>
  <span class="third">Third</span>
</div>

CSS

.wrap {
  width: 300px;
  display: flex;                    /* 1 */
  flex-wrap: wrap;                  /* 1 */
}
.header {
  flex: 0 0 100%;                   /* 2 */
  background-color: lightgray;
}
.first {
  flex: 1 0 33.33%;                 /* 3 */
  background: orangered;
}
.second {
  flex: 1 0 33.33%;                 /* 3 */
  background: lightgreen;
}
.third {
  flex: 1 0 33.33%;                 /* 3 */
  background: aqua;
}
.wrap > * {
  padding: 10px;
  box-sizing: border-box;
}