Fluid layout not fluid and one block drops down

Question

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

Code works perfectly when there is no p's and h's in the divs. Once I put some text everything goes out of order.

<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;
    }
}

when the text is added with p's and h's the html looks like that

<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> 

It's better to look at fiddle... What I want ? I want blocks to stay in one line kind of, not to drop down.

Answer 1

Add vertical-align: top; to your .left style