Inline-block element goes out of inline after text has been added

Question

I am trying to do something very simple. Have these three block aligned in my footer in an inline-block format. It was fine until I added

<div id="footer-grid3-logo">Hello</div>

To my footer-grid3. Why is this content pushing grid 3 down out of alignment?

footer {
 width: 100%;
 height: 400px;
 position: relative;
 bottom: 0;
 margin-bottom: 0;
 background: #696969;
}
#footer-main-container {
 width: 80%;
 height: 100%;
 margin: auto 10%;
}
#footer-grid1, #footer-grid2, #footer-grid3 {
 height: 100%;
 width: 33.3%;
 display: inline-block;
}
#footer-grid1 {
 background: blue;
}
#footer-grid2 {
 background: red;
}
#footer-grid3 {
 background: green;
}
#footer-grid3-logo {
 color: #0085A1;
 font-size: 1.2em;
}

<footer>
  <div id="footer-main-container"><div id="footer-grid1">
   </div><div id="footer-grid2">
   </div><div id="footer-grid3">
   <div id="footer-grid3-logo">Hello</div>
   </div>
  </div>
 </footer>