JSFiddle - React, Tailwind, and code Playground

HTML

<div class="lineHeight"><span><i class="baseline"></i>HELLO // line-height method</span></div>

<div class="padding"><span><i class="baseline"></i>HELLO // padding method</span></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  box-sizing: border-box;
}

body {
  margin: 10px;
}

div {
  float: left;
  width: 50%;
  height: 100px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1;
  background: #e0e0d8;
}

.lineHeight {
  left: 0;
}

.padding {
  left: 50%;
}

span {
  background: yellow;
}

.baseline {
  display: inline-block;
  width: 100%;
  margin-right: -100%;
  border-bottom: 1px solid royalblue;
}

.lineHeight {
  line-height: 100px;
}

.padding {
  padding-top: 43px; // or `calc((100px - 14px) / 2)`;
}