JSFiddle - React, Tailwind, and code Playground

by jeffory

HTML

<div class="clearfix">
  <div class="float-left"  style="background-color: green;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis soluta, delectus, animi nisi voluptatem natus, aut assumenda repudiandae, molestias reiciendis voluptate maxime deserunt. Magni vitae, debitis eius. Fugit laboriosam, sequi!
  </div>

  <div class="float-right" style="background-color: blue;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis soluta, delectus, animi nisi voluptatem natus, aut assumenda repudiandae, molestias reiciendis voluptate maxime deserunt. Magni vitae, debitis eius. Fugit laboriosam, sequi!
  </div>
</div>



<div style="background-color: red;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, voluptas laboriosam possimus, consectetur officia erro officiis corrupti qui id iste dignissimos. Accusantium enim, atque autem laboriosam aut!
</div>

CSS

div {
  margin-bottom: 1em;
}

.float-left {
	float: left;
  width: 40%;
}

.float-right {
	float: right;
  width: 40%;
}

/* http://cssmojo.com/the-very-latest-clearfix-reloaded/ */
.clearfix:after {
    content: " ";
    display: table;
    clear:both;
}