JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<div class="container">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
</div>

CSS

.container { overflow: hidden; }
.box {
  min-height: 25px;
  width: 50%;
 }
.a {
  background-color: red;
  float: left;
 }
.b {
  background-color: green;
  float: right;
 }
.c {
  background-color: blue;
  width: 100%;
 }
 @media(max-width: 800px) {
   .a { min-height: 50px; }
   .c {
     float: right;
     width: 50%;
    }
 }