JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Case 1) text height is bigger than image height -->
<div>
  
  <img class="img-valign" src="http://www.placehold.it/30x30" alt="" />
  <span class="text1">some text1</span>
  <img class="img-valign" src="http://www.placehold.it/20x20" alt="" />
  <span class="text1">some text1</span>
  
</div>

<br/><br/><br/>

<!-- Case 2) image height is bigger than text height -->
<div>
  
  <img class="img-valign" src="http://www.placehold.it/50x50" alt="" />
  <span class="text2">some text2</span>
  <img class="img-valign" src="http://www.placehold.it/70x70" alt="" />
  <span class="text2">some text2</span>
  
</div>

CSS

.img-valign {
  vertical-align: middle;
  margin-bottom: 0.75em;
}

.text1 {
  font-size: 44px;
}

.text2 {
  font-size: 24px;
}