JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
     <div class="row single">Your content</div>
     <div class="row double">
      <div class="column-2 left">Your content</div>
      <div class="column-2 right">Your content</div>
     </div>
     <div class="row triple">
      <div class="column-3 left">Your content</div>
      <div class="column-3 center">Your content</div>
      <div class="column-3 right">Your content</div>
     </div>
    </div>

CSS

#container { width: 80%; margin: auto; background-color: grey; padding: 20px; }
    .row { height: 150px; margin-bottom: 20px; position: relative; }
    .row div { height: 100%; }
    .single { background-color: white; }
    .column-2 { width: 48%; }
    .column-3 { width: 30%; }
    .left { background-color: yellow; float: left; }
    .center { float: left; margin: 0 5%; background-color: orange; }
    .right { background-color: green; float: right; }