JSFiddle - React, Tailwind, and code Playground

HTML

<h1>vertical-align: middle; no margin adjustment</h1>
<div style="font-size: 20px">
  <span class="simulatedImage"></span>
  20px
</div>

<div style="font-size: 30px">
  <span class="simulatedImage"></span>
  30px
</div>

<div style="font-size: 40px">
  <span class="simulatedImage"></span>
  40px
</div>


<h1>vertical-align: middle; margin-bottom: 0.25em</h1>
<div style="font-size: 20px">
  <span class="simulatedImage2"></span>
  20px
</div>

<div style="font-size: 30px">
  <span class="simulatedImage2"></span>
  30px
</div>

<div style="font-size: 40px">
  <span class="simulatedImage2"></span>
  40px
</div>

CSS

h1
{
    font-weight: bold;
    font-size: 1.2em;
}

div
{
  border: 1px solid black;
  margin-bottom: 10px;
}

span.simulatedImage
{ 
    height: 12px; 
    width: 12px; 
    background: red;
    display: inline-block;
    vertical-align: middle;
}

span.simulatedImage2
{ 
    height: 12px; 
    width: 12px; 
    background: red;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0.25em;
}