JSFiddle - React, Tailwind, and code Playground

HTML

<a href='#'>
    <img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg' width='50' height='50'/>
    There is underlined whitespace at beginning of this text
</a>
<br/>
<br/>
<a href='#'>
    <img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg' width='50' height='50'/>No Underlined Whitespace here.
</a>
<br/>
<br/>
<a href='#'>
    How come no underlined whitespace on this one?
</a>
<br/>
<br/>
<a href='#'>No Underlined Whitespace</a>

CSS

img {
    vertical-align: middle;
}