Problème CSS3 display

<div id="deux">Menu 
<ul> 
<li> point 1</li> 
<li> point 2</li> 
<li> point 3</li> 
<li> point 4</li> 
<li> point 5</li> 
</ul> 
</div> 
<div id="un">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at ipsum a velit imperdiet tincidunt. Curabitur vel lorem augue. Morbi interdum faucibus nunc sit amet dictum. Donec varius eros at enim dignissim vitae euismod risus imperdiet. Suspendisse dapibus mi at ante porttitor ac vulputate ante mattis. Donec vulputate tortor non ipsum condimentum ac porttitor lectus eleifend. Duis aliquam sodales magna, sed lobortis elit vehicula eget. Aliquam vehicula gravida neque, sit amet iaculis augue sagittis ut. </div> 

body{ 
width: 600px; 
margin: auto; 
background: blue; 
} 
#deux { 
width: 150px; 
display:inline-block; 
background: white; 
vertical-align:top; 
} 
#un{ 
width: 400px; 
display:inline-block; 
vertical-align:top; 
background:yellow; 
}