setting an image vertically aligned with text - html

Question

EDIT: Please disregard the phone/email row.
I would like to reach this kind of result:
Since I need the side texts to be as the same height of the icon, I am having some issues with the relative and absolute div wrappers and how to set them right.
HTML
<div class="row topWrapper">
<div class="iconWrapper">
<i class="fa fa-user-circle-o fa-2x"></i>
</div>
<div class="captionWrapper">
<h5><strong>Liat </strong></h5>
<h5>Your recruitment counsel</h5>
</div>
</div>
SCSS
.topWrapper {
background-color: #d9534f;
height: 150px;
.iconWrapper {
background-color: #f7ecb5;
display: inline-block;
position: relative;
width:16.67%;
i{
position: absolute;
top: 50%;
#include translate(0, -50%);
}
}
.captionWrapper{
background-color: #245580;
display: inline-block;
}
}

Answer 1

You don't need to use absolute position to get what you want, just a few things and you are good to go.
See code snippet:
Note: i didn't use SCSS for demonstration purpose
.topWrapper {
background-color: #d9534f;
height: 150px;
padding: 5px;
}
.iconWrapper {
display: inline-block;
font-size: 17px;
}
.captionWrapper {
display: inline-block;
}
.captionWrapper h5 {
margin: 2px;
/*reduce the margin to make the two texts aligned with the icon*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="row topWrapper">
<div class="iconWrapper">
<i class="fa fa-user-circle-o fa-2x"></i>
</div>
<div class="captionWrapper">
<h5><strong>Liat </strong></h5>
<h5>Your recruitment counsel</h5>
</div>
</div>