JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

<div class='overview-inner box row layout-start'>

<div class='flex33'>
  <small>One</small>
  <b>Two</b>
</div>

<div class='divider'></div>

<div class='flex33'>
  <small>Three</small>
  <b>Four</b>
</div>

<div class='divider'></div>

<div class='flex33'>
  <small>Five</small>
  <b>Six</b>
</div>

</div>

CSS

body {
  font:120% sans-serif
} .divider {
  height: 48px;
  margin: 0;
  display: block;
  border-top-width: 0;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgba(0,0,0,0.12)
} .box {
  display: flex;
  flex-direction: column;
  margin: 8px;
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.2), 0 1px 1px 0px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
} .layout-start {
  align-content: flex-start;
  align-items: flex-start;
} .row {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
} .flex25 {
  flex: 1 1 25%;
  max-width: 25%;
  box-sizing: border-box
} .flex33 {
  flex: 1 1 33%;
  max-width: 33%;
  box-sizing: border-box
} .overview-inner {
  text-align: center;
  padding: 20px;
  background: #4184F3;
  color: #fff;
} .overview-inner small {
  display: block;
  font-size: 100%;
} .overview-inner b {
  font-size: 150%;
}