jQuery append（）与CSS的怪异互动display：inline-block

Question

I am trying to create a webpage with two div sections displayed next to each other horizontally. In one of them I want to append content that will change over time. I noticed that if I use css display:inline-block to align the two div sections and then I use append() to insert a paragraph in the first section, the second one is pushed down to align with the paragraph block. I know I can fix this problem by using float:left instead, but I still don't understand why inline-block behaves that way. I wonder if there is a way to make inline-block work in case I really need to use that instead of float. Here is JsFiddle: Link

<div id="left">left</div>
<div id="right">right</div>

#left, #right{
    background-color:#ff0;
    width: 100px;height: 100px;
    display:inline-block;}

<script>
    $("#left").append("<p>Paragraph</p>");
</script>

Answer 1

when using display: inline-block you have to add vertical-align: top if you want the elements to display at the top:

JSFIDDLE

The reason being inline-block elements are set to baseline by default