Resizable button with an image - html

Question

I want to create a button like this one :
but bigger, resizable and to function properly on bootstrap.
Here's what I've done so far:
I've tried with display: inline-block; on download-btn-icon and download-btn-text then I wanted to center the .fa using http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ but the .fa displays way out of download-btn.
This is the html:
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="download-btn">
<div class="download-btn-icon">
<i class="fa fa-cloud-download fa-3x"></i>
</div>
<div class="download-btn-text">
<h3>Download Client</h3>
<h5>Get the latest full updated client.</h5>
</div>
</div>
</div>
and this is the less:
.download-btn {
width: 100%;
height: 70px;
background-color: #000;
.download-btn-icon {
display: inline-block;
float: left;
width: 25%;
height: 100%;
border-right: 1px solid #fff;
.fa{
padding-top: 14px;
padding-left: 23px;
}
}
.download-btn-text {
display: inline-block;
width: 75%;
float: right;
padding-left: 15px;
}
}
I'm clueless I don't know how to align the divs properly, I need some advice.

Answer 1

You can use display: table-cell and vertical-align: middle to achieve this effect. This solves the alignment issue and forces both elements to have the same height.
h3, h5 {
margin: 0;
line-height: 1.5em;
}
.download-btn-icon,
.download-btn-text {
display: table-cell;
background: #222;
vertical-align: middle;
padding: 7.5px 15px;
color: #999;
}
.download-btn-icon {
border-right: 1px solid #444;
}
<div class="download-btn">
<div class="download-btn-icon">
<i class="fa fa-cloud-download fa-3x"></i>
</div>
<div class="download-btn-text">
<h3>Download Client</h3>
<h5>Get the latest full updated client.</h5>
</div>
</div>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">