JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  This is some text with a vertically centred <span class="border middle">span</span> and <span class="border">another</span>, vertically bottom aligned, inside it.
</p>

CSS

p {
  line-height: 5ex;
}

.border {
  border: 1px solid red;
  padding: 0.3ex;
  vertical-align: text-bottom;
}

.middle {
  vertical-align: middle;
}