Bootstrap valign content

Question

У меня есть простой кусок кода, который я пытаюсь получить по вертикали.

JS Fiddle: https://jsfiddle.net/3kj44net/

.container-fluid { 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<header class="header-tool-title"> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-md-5 vcenter"> 
 
      <h1 class="toolTitle"><span name="el_toolName">Tool Name</span> <small class="toolSubTitle">#<span name="el_toolID">244</span></small></h1> 
 
     </div> 
 
     <div class="col-md-7 vcenter"> 
 
      <span class="pull-right toolStatus"> 
 
       <span class="pull-right"> 
 
        <h4 class="text-right"><span name="el_toolStatus"><a data-content-type="manageDeprecation" name="route">Scheduled for Deprecation</a></span></h4> 
 
       </span> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</header>

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

Я попытался добавить атрибут verticle-align к контенту, но он все равно не двигался.

Мысли?

Answer 1

Вы можете использовать гибкий, чтобы иметь обоих столбцах один и тот же размер и

margin-top:auto; 

на элемент, который вы хотите, чтобы нажать на дно.

Вот скрипка:

https://jsfiddle.net/3kj44net/6/