Css 在一个包含div的分区内，将动态高度的两个div顶部对齐

我正在尝试将包含div的两个子div顶部对齐。子div包含不同的内容，并且可能具有不同的高度。有没有办法让两个子div顶部对齐

这里有一把小提琴来说明这个问题-

HTML

---

您可以使用

垂直对齐：文本顶部在您的左右面板中
 使用
垂直对齐：顶部到两个面板

CSS:

你的JSFIDLE似乎很管用。。。或者我遗漏了什么？如果你不需要它们居中，那么你可以在两个“面板”中都添加浮动：是的，就是这样。非常感谢。
<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>

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

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