Выровняйте два divs бок о бок и центрируйте их внутри другого

Question

Я пытаюсь разместить два divs (.health-icon и .health-description) бок о бок, но горизонтально центрируйте их внутри .health-status. Я смог это сделать.

Однако они не соответствуют по вертикали. Мне нужен .health-descriptionline-height для того же размера .ranking. Но кажется, что .health-description немного ниже .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

Это отличается от How to horizontally center a <div> in another <div>?, где акцент делается на горизонтально центрирования DIV внутри другого. Это уже решено здесь. Случается, что когда я использую дисплей inline-block, два div не корректно выровнены по вертикали.

Answer 1

Это очень конкретный вопрос, поэтому я дам ответ, который не может использоваться для общих случаев.

Изменение здоровья описание класса для этого:

.health-description { 
    display: inline-block; 
    transform: translate(0, -30%); 
}