JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="splitter">splitter</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="splitter">splitter</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="splitter">splitter</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS

.box {
  width: 48%;
  float: left;
  height: 30px;
  background: #ccc;
}

.box:nth-of-type(odd){
  margin-right: 4%;
  background-color: red;
}

.splitter {
  width: 100%;
  float: left;
}