css3 - CSS: Inline-Display: Using DIV why am I getting space on 2nd DIV? -

Very easy to use inline-display instead of page float, set it for some time now, however, For some reason on the page when I set the height of the logo div, the menu div falls down.

On the demo

HTML

  & lt; Div id = "topbar" & gt; & Lt; Div class = "item" id = "logo" & gt; & Lt; / Div & gt; & Lt; Div class = "item" id = "menu" & gt; Menu & lt; / Div & gt; & Lt; / Div & gt;   
 CSS  
  #topbar {width: 100%; Max-width: 1000px; Margins: Auto; } #topbar .item {row-height: 91px; Display: Inline-block; Background color: # 063; } #topbar #logo {background-image: url (../img/ logo.png); Repeat Background: No Repetition; Width: 30%; Height: 91px; } #topbar # menus {width: 60%; }   
 Maybe there is a simple solution or simple error from my side, but can not see it.   
 
 
 Use vertical-align: top  on the menu and it's good It should look like  #menu  is to create your own style:  
  #topbar #menu {width: 60%; Vertical-alignment: top; }   
 This is a