JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="col half">
    <div class="col narrow">(1)</div>
    <div class="col remainder">(2)</div>
  </div>
  <div class="col half">
    <div class="col narrow">(1)</div>
    <div class="col remainder">(2)</div>
  </div>
</div>
<div class="row">
  <div class="col half">(3)</div>
  <div class="col remainder">(3)</div>
</div>
<div class="row">
  (4)
</div>

CSS

/* structure */
.row { clear: both; overflow: hidden; }
.col { float: left; }
.half { width: 50%; }
.narrow { width: 30%; }
.remainder { float: none !important; overflow: hidden; }

/* skin: just for demo */
.row { text-align: center; border-bottom: 1px solid #999; }
.half { background: #fcc; }
.narrow { background: #ccf; }
.remainder { background: #cfc; }