JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
<div id="nav_content">
<div id="home_icon" ></div>
<div id="search_icon" ></div></div>
</nav>
CSS
nav {
background:white no-repeat;
width:75%;
height:5em;
margin-left:8em;
}
#nav_content {
width:100%;
height:100%;
clear:both;
position:relative;
display:inline-block;
float:left;
}
#home_icon {
background:red url(../images/home.png) no-repeat;
width:50px;
height:50px;
top:50%;
position:relative;
transform: translateY(-50%);
transition:ease-in-out 0.5s;
margin-left:1em;
float:left;
display:inline-block;
}
#search_icon {
background:green url(../images/searchicon.png) no-repeat;
width:40px;
height:40px;
top:50%;
transform:translateY(-50%);
transition:ease-in-out 0.5s;
float:right;
display:inline-block;
position:relative;
}