인라인 블록 div의 텍스트

Question

오늘 아침 이상한 CSS 문제를 발견했으며 CSS 전문가가 나를 도울 수 있기를 바랍니다. this demo에서 빨간색 부분의 텍스트가 아래로 밀어내는 이유는 무엇입니까? 나는 두 부서가 서로 옆에있을 것으로 예상했다. 감사!
편집 : 답변 주셔서 감사합니다. 나는 조금 대답을 받아 들일 것이다. 왜 이런 일이 일어 났는지 설명 할 수 있습니까?

Answer 1

...........................

안녕하세요 지금 vertical-align: top;

에 사용

div { 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
    vertical-align: top; 
} 

Demo

Answer 2

float:left을 추가하면 문제가 해결됩니다.

Working sample