JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<div class="area1">
  <div class="row">
    <div class="text">
      111
    </div>
    <div class="text">
      222
    </div>
    <div class="text">
      333
    </div>
    <div class="clear"></div>
  </div>
</div>
<div>text after</div>

<hr/>

<div class="area2">
  <div class="row">
    <div class="text">
      111
    </div>
    <div class="text">
      222
    </div>
    <div class="text">
      333
    </div>
    <div class="clear"></div>
  </div>
</div>
<div>text after</div>

CSS

.area1 .row .text {
  float:left;
  margin: 0 5px 0 0;
}
.area1 .clear {
  clear: both;
}

.area2 {
  display: table;
}
.area2 .row {
  display: table-row;
}
.area2 .text {
  display: table-cell;
  padding: 0 5px 0 0;
}