JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div>Hello World</div>
<div>My plane</div>
<div>Janine Smith</div>

CSS

div {
  border: 1px solid crimson;
  float: left;
  height: 40px;
  margin-right: 12px;
  position: relative;
  text-align: center;
  width: 100px;
}

div:after {
  /*background: navy;*/
  content: ' ';
  display: inline-block;
  height: 100%;
  position: relative;
  right: 0;
  top: 0;
  vertical-align: middle;
  width: 1px;
}

JavaScript

// hack using a pseudo element to vertical center text, even text that is in a floated div