JSFiddle - React, Tailwind, and code Playground
HTML
<div class="icon-button-with-text-wrapper">
<div class="item">
<img src="http://i.imgur.com/YjcaGSx.png" alt="" />
</div>
<div class="item">
<p>Speak to an Admissions Counselor<p>
</div>
</div>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.icon-button-with-text-wrapper {
border: 1px solid #7e898a;
background-color: white;
display: table;
margin-top: 10px;
padding: 10px;
font-size: 1.5em;
width: 100%;
height: 100%;
}
.icon-button-with-text-wrapper > .item{
display: table-cell;
vertical-align: middle;
}
.icon-button-with-text-wrapper > .item:nth-of-type(1){
width: 60px;
text-align: center;
}
.icon-button-with-text-wrapper img {
max-height: 50px;
max-width: 50px;
}