Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless of its content.
http://jsfiddle.net/bkmorse/519xzvou/
CSS:
.container {
width: 470px;
border:1px solid purple;
height: 210px;
}
.box {
width: 150px;
height: 200px;
border:1px solid red;
display:inline-block;
}
HTML:
<div class="container">
<div class="box">
<h1>Box 1</h1>
<p>Content</p>
<p>Content</p>
</div>
<div class="box">
<h1>Box 2</h1>
</div>
<div class="box">
<h1>Box 3</h1>
<p>Content</p>
<p>Content</p>
</div>
</div>