JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="section one">One</div>
  <div class="section two">Two</div>
  <div class="section three">Three</div>
  <div class="section four">Four</div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 5px;
  grid-template-areas: " one one "
                       " two three "
                       " four three ";
}

.one   { grid-area: one; }
.two   { grid-area: two; }
.three { grid-area: three; }
.four  { grid-area: four; }

@media ( max-width: 600px ) {
  .container {
       grid-template-columns: 1fr;
       grid-template-areas: " one "
                            " two "
                            " three"
                            "  four "; }
}

/* non-essential; just for demo */
.section {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}