JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p>One</p>
  <p>
    This is the main content. This box will always be the
    largest (tallest) of them all.
  </p>
  <p>
    On desktop this should always be the only box to the left,
    and it should take up half of the available width. Box
    "Two" should always be displayed top-right, and box "Three"
    should always be displayed below box "Two".
  </p>
  <p>
    On mobile all boxes should stack vertically, with "Two" on
    top, then "One" and last (on the bottom) I want "Three"
  </p>
  <p>
    There is also a footer that needs to be full-width, and
    below all of these boxes ("One", "Two" and "Three")
  </p>
</div>
<div>
  <p>Two</p>
  <p>Top-right on desktop. Top (full-width) on mobile</p>
</div>
<div>
  <p>Three</p>
  <p>Below "Two" on desktop. Below "One" on mobile (full-width)</p>
</div>
<footer>Footer content below boxes</footer>

CSS

div {
  background-color: lightblue;
  width: calc(50% - 20px);
  margin: 10px;
  float: left;
}

footer {
  background-color: lightpink;
  clear: both;
}