JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div id="hl1">
    <b>hi</b>
  </div>
  <div id="hl2">
    by
  </div>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
}

div#wrapper {
  width: 100%;
  height: 100%;
}

div#hl1 {
  border-style: solid;
  width: 10%;
  height: 30%;
  display: inline-block;
  vertical-align: middle;
}
div#hl1:after{
  content:'';
  display:inline-block;
  width:0;
  height:100%;
  vertical-align:middle;
}
div#hl2 {
  border-style: solid;
  width: 10%;
  height: 15%;
  display: inline-block;
  vertical-align: middle;
}

b {
  vertical-align: middle;
  display: inline;
}