Aligning boxes and sizing children - html

Question

I am trying to make my div boxes work out.
I want the orange boxes to have the same size by expanding the smaller ones to the same height as the biggest one.
I also want to make the one on the second row fit properly, to the left perfectly aligned.
HTML
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description <br /> Extra line</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
CSS:
.picture {
width: 20%;
margin: 5px;
float: left;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
}
JSFiddle with the problem: http://jsfiddle.net/PW3GV/1/
Edit
The orange boxes can have a varying height. Sometimes it may contain 1 line, 2 lines or 3 lines - so a fixed height is not going to work out

Answer 1

check this fiddle: http://jsfiddle.net/VYZEx/
i've just added a single line of code to the css, it will work as long as you don't mind that the orange boxes have a fixed size, in that case change this and you will be done:
.description {
background-color: orange;
height: 40px;
}
Good luck!

Answer 2

There you are JSFiddle hope it's what you were aiming for;
.picture {
width: 18.5%;
margin: 5px;
float: left;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
height: 20px;
overflow: auto;
cursor: pointer;
text-align: center;
}
.description::-webkit-scrollbar{
display: none;
}
I kept the description size as it is and instead made it scrollable.

Answer 3

Change the .picture width to 18.484% as below:
.picture {
width: 18.484%;
margin: 5px;
float: left;
}
.description {
background-color: orange;
}
And add the jQuery script as below:
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".description"));
});
See the updated jfiddle.

Answer 4

Give the .picture frame a relative positioning, make the description position relative and place it at the bottom of the .picture frame then give it a 100% width to take up the entire container.
.picture {
width: 20%;
margin: 5px;
float: left;
position: relative;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
position:absolute;
bottom:0;
width:100%;
}
http://jsfiddle.net/PW3GV/8/

Answer 5

Here is how I would attempt this using relative positioning for .picture and absolute positioning for .description.
See my jsfiddle:
http://jsfiddle.net/PW3GV/9/
.picture {
width: 20%;
margin: 5px;
float: left;
position:relative;
}
.description {
background-color: orange;
position:absolute;
bottom:0;
width:100%;
}