top align 2 divs динамической высоты в пределах содержащего div

Question

Я пытаюсь выровнять два дочерних divs в содержащем div. Детские divs содержат различный контент и могут иметь разную высоту. Есть ли способ сделать два дочерних divs top-align?

Вот скрипку, чтобы проиллюстрировать эту проблему - http://jsfiddle.net/billafy/Rhj36/3/

HTML

<div class="headerStuff"> 
    Header 
</div> 
<div class="sectionArea"> 
    <div class="leftPanel"> 
     <div><img src="http://placekitten.com/50/50" alt="some image1" /></div> 
     <div><button>test</button></div> 
    </div> 
    <div class="rightPanel"> 
     <div><img src="http://placekitten.com/50/50" alt="some image2" /></div> 
     <div> 
      <span>Some other text</span> 
      <div> 
       <span>And some additional content</span> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="footerStuff"> 
    Footer 
</div> 

CSS

.headerStuff { 
     font-size: 20pt; 
     background-color: purple; 
     border: 1px solid lime;  
    } 
    .sectionArea { 
     width: 100%; 
     display: inline-block; 
     height: 370px; 
     text-align: center; 
     vertical-align: middle; 
     border: 1px solid lime; 
    } 
    .leftPanel { 
     display:inherit; 
     border: 1px solid orange; 
    } 
    .rightPanel { 
     display:inherit; 
     border: 1px solid blue; 
    } 
    .footerStuff { 
     font-size: 20pt; 
     background-color: red; 
     border: 1px solid lime;  
    } 

Answer 1

Использовать vertical-align: top; для обеих панелей.

CSS:

.leftPanel { 
    display:inherit; 
    border: 1px solid orange; 
    vertical-align: top; 
} 
.rightPanel { 
    display:inherit; 
    border: 1px solid blue; 
    vertical-align: top; 
} 

Answer 2

Вы можете использовать vertical-align:text-top; в правой и левой панелях.