In the div, there are elements like h1, p, and a. The goal is to have the h1 at the top, the a at the bottom, and the p in the middle regardless of its height.
Check out the jsfiddle for a live demo.
Here is the source code:
HTML
<div class="box">
<div>
<h1>Header</h1>
<p>text <br>line2<br>line3</p>
<a href="#">bottom</a>
</div>
<div>
<h1>Header</h1>
<p>text <br>line2</p>
<a href="#">bottom</a>
</div>
</div>
CSS
.box {
box-sizing: border-box;
padding: 0 1px;
margin: 0;
overflow: hidden;
clear: both;
border: 1px solid blue;
}
.box div {
float: left;
width: 50%;
box-sizing: border-box;
padding: 10px;
}
.box h1 {
padding: 0;
margin: 0 0 10px;
}
.box p {
padding: 0;
margin-right:5px;
text-wrap:normal;
}
.box a {
}