JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div class="container cf">
  <div class="float">Duis accumsan massa accumsan orci tincidunt eleifend.</div>
  <div class="float">Sed laoreet dui a dui varius viverra. Nullam sit amet neque maximus, placerat ipsum sed, ultricies purus. In rhoncus erat sed justo mattis, vel vestibulum massa lacinia. </div>
</div>

<div class="container cf">
  <div class="float">Pellentesque quam ex, auctor sed urna at, facilisis gravida odio. Phasellus a nunc egestas mi scelerisque tincidunt. Cras varius ullamcorper neque quis molestie. Cras a turpis feugiat, porttitor ligula sit amet, maximus enim. Mauris maximus ipsum ut elit imperdiet placerat. Vivamus quis faucibus est, quis posuere nibh.</div>
  <div class="float">Vestibulum aliquet neque at nisl consequat, id tincidunt nunc mollis.</div>
</div>

CSS

.cf:before,
.cf:after {
  content: '';
  display: table;
}

.cf:after {
  clear: both
}

.container {
  border: 1px solid thistle;
  margin-top: 40px;
  margin-bottom: 40px;
}

.float {
  background: lightgray;
  float: left;
  margin-right: 2%;
  width: 49%;
}

.float:last-of-type {
  margin-right: 0;
}

JavaScript

// Testing floats in containers to make them the same height.