JSFiddle - React, Tailwind, and code Playground

HTML

<p><span class="a">+</span>Foo</p>
<p><span class="b">+</span>Foo</p>

CSS

.a
{
  width:3ex;
  height:3ex;
  line-height: 3ex;
}

.b
{
  width: 1ex;
  height: 1ex;
  line-height: 1ex;
}

.a, .b
{
  display:inline-block;
  /*display:table-cell;*/
  background:red;
  text-align:center;
  vertical-align:middle;
  margin: 0 1ex;
}