макет жидкости не жидкости и один блок опускается

Question

http://jsfiddle.net/TomasRR/WuNL3/1/

код прекрасно работает, когда нет р и Эйч в дивы. Как только я помещаю какой-то текст, все выходит из строя.

<div class="cont"> 

     <div class="left"> 

     </div> 

     <div class="right"> 

     </div> 

</div> <!-- .cont --> 

CSS

body { 
    width:100%; 
    margin:0; 
    padding:0; 
} 

.cont { 
    white-space:nowrap;        
    width:100%; 
} 

.left { 
    border:1px solid red; 
    width:50%; 
    height:200px; 
    display: inline-block; 

} 

.right {        
    border:1px solid black; 
    width:50%; 
    height:200px; 

    display: inline-block; 
} 


@media only screen and (max-width: 800px) { 
    .left, .right { 
     width: 400px; 
    } 
} 

когда текст добавляется с р и х годов HTML выглядит следующим образом

<div class="cont"> 

     <div class="left"> 
     <h1>Programming and fuss</h1> 
      <h2><em>by Tomas R. </em></h2> 
    <p>MY TOP 3 PAGES:</p> 
      <a href="http://www.twitter.com/" target="_blank" title="it is twitter" />TWITTER</a> 

      <a href="http://www.wikipedia.org" target="_blank">WIKIPEDIA</a> 
      <a href="http://www.vice.com" target="_blank">VICE</a> 
     </div> 

     <div class="right"> 
       <p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p  
     </div> 

Это лучше смотреть на скрипке ... Что я хочу? Я хочу, чтобы блоки оставались в одной линии, а не падали.

Answer 1

Добавить vertical-align: top; в свой .left стиле