CSS vertical align block in a container

Question

fiddle

Any way to align all .col to the top, matching the height of their siblings above?

Answer 1

Here is my current solution for maintaining equal height and width.

<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
</div>

.row {
    display: flex; /* assigns equal height to all the children */
}

.col {
    flex: 1; /* assigns, equal width*/
}

This is the solution for backwards support for browser such as IE8,9 :

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 50%; /* depends on the number of columns, 50% for two col, 25% for four column and so on*/
}