title: Vertically aligning <div>'s within Bootstrap
body: <p>So I'm using Bootstrap's grids to create (particularly here) a description of some variable <em>T</em> and a slider corresponding to it. The problem is that these two guys are not vertically aligned by default (see <a href="https://i.imgur.com/NwmywUF.png" rel="nofollow noreferrer">here</a>).</p>
  
  <p>I wonder if I could fix this without majorly affecting grids (to make it look cozy in mobile version as well). The best option would be the solution using some <strong>Bootsrap classes</strong> (without using fixed pixel-size).</p>
  
  <p><strong>P.S.</strong> <em>Just in case if it's important, I'm using <a href="http://simeydotme.github.io/jQuery-ui-Slider-Pips" rel="nofollow noreferrer">jQuery UI Slider Pips</a> for my .slider.</em></p>
  
  <pre><code>&lt;div class="row"&gt;  
    &lt;div class="col-sm-2 text-right"&gt;
      &lt;h4&gt;T&lt;br&gt; &lt;small&gt;Some Description&lt;/small&gt;&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-10"&gt;
      &lt;div class="slider"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPD.</strong> Using the following code for a parent is not an option.</p>
  
  <pre><code>.sliderParent {
      display: flex;
      align-items: center;
  }
  </code></pre>
  
  <p>It helps with a fixed positioning of <em>div</em>'s, but instead disables Bootstrap's grid transitioning from <em>col-sm-*</em> to <em>col-xs-*</em></p>
  
  <pre><code>&lt;div class="row sliderParent"&gt;
    &lt;div class="col-sm-3 col-xs-12"&gt;
      ...
    &lt;/div&gt;
    &lt;div class="col-sm-9 col-xs-12"&gt;
      ...
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>So if anyone can advice something else I would be very grateful. = )</p>
  
  <p><strong>UPD.</strong> I found a solution <a href="https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3">here</a>. Not exactly what I wanted, but at least the functionality does not suffer. Here is the class for children <em>div</em>'s:</p>
  
  <pre><code>.vcenter {
     display: inline-block;
     vertical-align: middle;
     float: none;
  }
  </code></pre>