Equal Height Columns in a Row using Flex Box

In this tutorial I'll be showcasing how we can achieve equal heights on our columns using the CSS and HTML. More specifically I'll be demonstrating the Flex Box feature of CSS which allows us to create these equal height columns without resorting to a nasty javascript workaround.

Flex CSS

.list {
  display: flex;
  flex-wrap: wrap;
}

.list-item {
  background-color: #eee;
  display: flex;
  color: white;
}
.list-content {
  padding: 1.5em;
}

So how does this work? In our .list class we use display: flex; which initiates flexbox for the outer element. In order for our inner-elements to all have the same height, we have to use display:flex; once again in our .list-item css class.