JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper cf">
  <div class="col">
    column 1
  </div>
  <div class="col">
    column 2
  </div>
  <div class="col">
    column 3
  </div>
  <div class="col">
    column 4
  </div>
  </div>
</div>

<p>
Something at bottom
</p>


<hr />

<div class="wrapper-alt">
  <div class="col">
    column 1
  </div>
  <div class="col">
    column 2
  </div>
  <div class="col">
    column 3
  </div>
  <div class="col">
    column 4
  </div>
  </div>
</div>

<p>
Something at bottom
</p>

CSS

.cf:after {
    content:"";
    display:block;
    clear:both;
}

.col {
  float: left;
  width: 50%;
  margin-bottom: 50px;
}

.wrapper {
  margin-bottom: -50px;
}

.wrapper-alt {
  margin-bottom: -50px;
  overflow: hidden;
}