JSFiddle - React, Tailwind, and code Playground

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>
  <span>XYZ</span>
</p>
<p>
  <span>+7</span>
  <span></span>
  <span>XYZ</span>
</p>

CSS

span {border: 1px solid;
font-size: 80px}
img {border: 1px solid; height: 10px; position:relative; top: -0.11em;}
body * {vertical-align:middle}