So i have this code
<html>
<head>
<style type="text/css">
div.one { border:1px solid black; text-align:center; padding:.2em; height:300px;
}
div.one div {display:inline-block; height:100%;}
</style>
</head>
<body>
<div class="one">
<div style="border:1px solid red; width:40%">
<h3>1st div</h3>
<p>line #1</p>
<p>line #2</p>
<p>line #3</p>
<p>line #4</p>
</div>
<div style="margin:0 .2em; width:16%; border:1px solid red;">
<h3>2nd div</h3>
<p>line #1</p>
<p>line #2</p>
<p>line #3</p>
</div>
<div style="border:1px solid red; width:40%;">
<h3>3rd div</h3>
<p>line #1</p>
<p>line #2</p>
<p>line #3</p>
<p>line #4</p>
</div>
</div>
</body>
</html>
and if you run it, it makes the middle div which has less p elements in move down, is there an easy way to get it to align to the top with the others