JSFiddle - React, Tailwind, and code Playground

by Sanjito Kurniawan

HTML

<div>
  <div id="entity1" class="entity">
    <div>Alphabet</div>
    <div>AB</div>
    <div>CD</div>
    <div>EF</div>
  </div>
  <div id="entity2" class="entity">
    <div>Numbers</div>
    <div>12</div>
    <div>34</div>
    <div>56</div>
  </div>
  <div id="entity3" class="entity">
    <div>Symbols</div>
    <div>αα</div>
    <div>ΩΩ</div>
  </div>
</div>

CSS

.entity { float: left; display: inline-block; }

/* Cosmetics */
.entity > div:first-child { border-bottom: 1px solid #333; }
.entity:not(:last-child) { border-right: 1px solid #333; }
.entity div { padding: 0 5px; }