JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layout--threecol">
  <div class="layout-region layout-region--top">
    <h2>
    This is the top region. There is also content in the middle regions - 1 & 2 & 3
    </h2>
  </div>
  <div class="layout-region layout-region--first" style="background: pink">
    This is the content in the first region. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  </div>
  
  <div class="layout-region layout-region--second" style="background: yellow">
    This is the content in the second region. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  </div>
  
  <div class="layout-region layout-region--third" style="background: cyan">
    This is the content in the third region. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  </div>
  
  <div class="layout-region layout-region--bottom">
    This is some content in the bottom region. This is some content in the bottom region. This is some content in the bottom region.
  </div>
</div>

<div class="layout--threecol">
  <div class="layout-region layout-region--top">
    <h2>
    This is the top region. There is also content in the middle regions - 1 & 2
    </h2>
  </div>
  <div class="layout-region layout-region--first" style="background: pink">
    This is the content in the first region. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna...

CSS

.layout--threecol {
  display: flex;
  flex-wrap: wrap;
}

.layout--threecol > .layout-region,
.layout--threecol > .layout-region--second {
  flex: 0 1 100%;
}

@media screen and (min-width: 40em) {
  .layout--threecol > .layout-region--first,
  .layout--threecol > .layout-region--third {
    flex: 1 1 25%;
  }
  .layout--threecol > .layout-region--second {
    flex: 1 1 50%;
  }
}