Align two divs side-by-side and center them inside another - html

Question

I'm trying to place two divs (.health-icon and .health-description) side-by-side, but horizontally center them inside .health-status. I was able to do this.
However, they're not properly vertically aligned. I need .health-description line-height to be the same size of the .ranking. But it seems that .health-description is a little bit lower than .health-icon.
.health-status {
text-align: center;
margin: 0 auto;
}
.health-icon {
display: inline-block;
}
.health-description {
display: inline-block;
line-height: 70px;
font-weight: bold;
}
.rating-circle {
height: 70px;
width: 70px;
border-radius: 250px;
font-size: 36px;
font-weight: 700;
color: white;
line-height: 65px;
text-align: center;
background: #2c3e50;
/*float: left;*/
display: inline-block;
/*margin-right: 20px;*/
padding-left: 2px;
padding-top: 2px;
}
<div class="panel-body">
<div class="health-status">
<div class="health-icon">
<div id="rating" class="rating-circle sq-orange" data-role="status-name">A</div>
</div>
<div class="health-description">UTI</div>
</div>
<div class="minidash">
<section class="row">
<div class="card col-md-6">
<div class="value">123.456</div>
<div class="name">Porte</div>
</div>
<div class="card col-md-6">
<div class="value">-435,0</div>
<div class="name">Variação de Curto Prazo</div>
</div>
</section>
</div>
</div>
http://jsfiddle.net/n1o8uvcv/1/
EDIT
This is different from How to horizontally center a <div> in another <div>?, where the focus is to horizontally center a div inside another. This is already solved here. What happens is that when I use the inline-block display, the two divs are not correctly vertically aligned.

Answer 1

This is an extremely specific question so i'll give an answer that is not usable to general cases.
Change your health-description class to this:
.health-description {
display: inline-block;
transform: translate(0, -30%);
}