JSFiddle - React, Tailwind, and code Playground

by DTX_

HTML

<p>
  <span>+7</span>
  <span><img src="https://cdn4.iconfinder.com/data/icons/simply-8-bits-4/96/eye_in_sky.png"></span>
  <span>XYZ</span>
</p>
<p>
  <span>+7</span>
  <span><span class="o">O</span></span>
  <span>XYZ</span>
</p>
<p>
  <span>+7</span>
  <span><span>O</span></span>
  <span>XYZ</span>
</p>
<p>
  <span>+7</span>
  <span>.</span>
  <span>XYZ</span>
</p>
<p>
  <span>+7</span>
  <span></span>
  <span>XYZ</span>
</p>

CSS

span {border: 1px solid;
font-size: 30px}
img {border: 1px solid; height: 10px;}
body * {vertical-align:middle}
.o {font-size: 10px;}