title: How to vertical align text to the center in the bottom left footer
body: <p>It is a single row made of 3 columns.
  I want to make the "h5 class:footer-small" vertical aligned to the div "class: col-1"</p>
  
  <p><a href="https://i.stack.imgur.com/qXkQB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qXkQB.png" alt="image of how it currently looks"></a></p>
  
  <p><strong>I found out that using display: inline-block, it made the text vertical aligned in the center. But I did not understand how was it possible? Can someone explain why using display:inline-block worked</strong>?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;footer&gt;
        &lt;div class="row-4"&gt;
          &lt;div class="col-1"&gt;
            &lt;p class="col-1"&gt;
              &lt;h5 class="footer-small"&gt;Seattle&lt;br&gt;Grace&lt;br&gt;Hospital&lt;/h5&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-5"&gt;
            &lt;h5 class="footer-desc"&gt;He is a Bowdoin College graduate and attended Columbia University College &lt;br&gt;of Physicians and Surgeons&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class="col-6"&gt;
            &lt;h2 class="footer-frase"&gt;McDreamy&lt;/h2&gt;
              &lt;em class="footer-frase"&gt;"It's a beautiful night to save lives"&lt;/em&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
  </code></pre>