Display: inline-block, problem z pozycjonowaniem

Question

Cześć, mam problem z display: inline-block;. Bloki z klasami B i C mają ustawione display: inline-block; ale C jest ustawione niżej niż B. Dzieje się tak z powodu TEXT. Jeżeli go usunę to bloki ustawiają się w tej samej linii. Dodatkowo jeżeli dla #D ustawię position: absolute to też bloki B i C też się ustawią w tej samej linii. Dlaczego tak się dzieje i jak to prawidłowo rozwiązać?

.A {
  background-color: white;
  height: 100%;
  width: 100%;
}

.B {
  display: inline-block;
  height: 48px;
  width: 64px;
  background-color: #777777;
}

.C {
  display: inline-block;
  height: 48px;
  width: 64px;
  background-color: red;
}

#D {
  padding: 10px 0 0 10px;
}

<div class="A">
  <div class="B"></div>
  <div class="C">
    <header id="D">TEXT</header>
  </div>
</div>

Na zdjęciu pokazane jest, jak teraz jest i jak powinno być.

Comments

Dobra, udało mi się to naprawić. Dopisałem: vertical-align:top;