JSFiddle - React, Tailwind, and code Playground

by Narek Tarverdyan

HTML

<div>
	<span>This text is vertically aligned</span>
</div>


<div>
	<img class="small" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-location-512.png">
	<span>This text is also vertically aligned</span>
</div>

<div>
	<img class="medium" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-location-512.png">
	<span>But as the image get's larger, it starts messing up the vertical alignment</span>
</div>

<div>
	<img class="large" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-location-512.png">
	<span>and now it's totally messed up</span>
</div>

CSS

div{
 	background-color: grey;
 	height:40px;
 	line-height: 40px;
  margin-bottom:20px;
 }
 img {
   vertical-align: middle;
 }
 .small{
   height:20px;
 }
 .medium{
   height:30px;
 }
 .large{
 	height:40px;
 }