JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="container clearfix">
  <div class="two-cols">
    <div>Sup</div>
    <div>Yo</div>
  </div>
  <div class="three-cols">
    <div>Hello</div>
    <div>Crystal</div>
    <div>Lee</div>
  </div>
  <div class="four-cols">
    <div>I</div>
    <div>Have</div>
    <div>Four</div>
    <div>Columns</div>
  </div>
</div>

CSS

body {
  background:#333;
  text-align:center;
}
.container{
  width:500px;
  margin:0 auto;
  background:#fff;
}
.container > div{ margin-top:10px; }


/* This below is all what you want */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.two-cols > div {
  display:inline-block;
  width:50%;
  float:left;
}
.three-cols > div {
  display:inline-block;
  width:33%;
  float:left;
}
.four-cols > div {
  display:inline-block;
  width:25%;
  float:left;
}