HTML5/CSS align list-items depending on other columns mutual height

Align list-item with the help of flex. Flex will make columns flexible according to content. The wrapper will layout columns in a row.

.wrap{
   display : flex
}// This will help wrapper to become flexible
.wrap.col{
   flex: 1 0 33%;
}

Flex is basically a property which helps in making element flexible.

Use the following to keep the lists vertically aligned to the bottom −

.col .content {
   margin-top: auto;
}