Push column in a grid to the bottom, vertically align not working

Question

I have a 3 columns grid with 1st and 3rd columns having 3 rows but 2nd column only 1 row.

1.1    ==2==    3.1
1.2             3.2
1.3             3.3

How can I push the ==2== to the bottom?

1.1             3.1
1.2             3.2
1.3    ==2==    3.3

Taking hints from vertical-align with Bootstrap 3 & How to use vertical align in bootstrap I make it into a table and cell format but it's still not working...

http://jsfiddle.net/qfbp1o86/

Answer 1

Add float:none for your child element.

.child {
border: 1px dotted blue;
display: table-cell;
vertical-align:bottom;
text-align:center;  
float:none;
}

DEMO