Text in inline-block div pushing it down [duplicate]

Question

I discovered a strange CSS problem this morning and I'm hoping the CSS experts can help me out. In this demo, why is the text in the red div pushing it down? I expected that the two divs would be next to each other. Thanks!
EDIT: Thanks guys for the answers. I will accept an answer in a bit. Can anyone explain why this is happening?

Answer 1

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

Hi now used to vertical-align: top;

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

Demo