title: Text is not aligned properly on row
body: <p>See the following example:</p>
  
  <p><img src="https://i.gyazo.com/37e07c37d3f2b9a15231f2f90a2e3b1d.png" alt=""></p>
  
  <pre><code>    &lt;div class="row"&gt;
        &lt;div class="col-2"&gt;
          &lt;p&gt;Error&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-8"&gt;
          &lt;div class="progress error" data-toggle="tooltip" data-placement="bottom"&gt;
            &lt;div class="progress-bar error-bar" role="progressbar"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-2"&gt;
          &lt;a tabindex="0" data-container="body" data-toggle="popover" data-placement="right" data-content="Some random text"&gt;
            &lt;i class="fa fa-info-circle" aria-hidden="true" style="vertical-align: top"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The text "Error" is not vertically aligned properly with the prograss bar and font awesome icon.  I tried adding <code>vertical-align: top</code> to <code>&lt;p&gt;</code> but it did not make a difference. How do I correctly vertically align the text?</p>