Flexbox equal height cards

Flexbox magic

<div class="cardContainer">
  <div class="card">
    <p class="cardContent">
      Card 1 with little text.
    </p>
    <button>
      I'm at the bottom
    </button>
  </div>
  <div class="card">
    <p class="cardContent">
      Card 2 with a bit more than little text.
    </p>
    <button>
      I'm at the bottom
    </button>
  </div>
  <div class="card">
    <p class=cardContent>
    Card 3 with a lot of text. By a lot I mean at least couple of lines of text. Just a bit more text to make sure.
    </p>
    <button>
      I'm at the bottom
    </button>
  </div>
</div>

.cardContainer {
  display: flex;
  width: 100vw;
}

.card {
  display: flex;
  flex-direction: column;
  width: 33.3%;
  margin-right: 1rem;
  padding: 1rem;
  border-radius: 6px;
  background-color: #096dd9;
  color: #FFF;
}

.cardContent {
  flex: 1;
}

Summary

• Flexbox was used on the container div to make all child cards equal height.
• A card itself is also constructed with flexbox for column layout.
• flex: 1 property expands height of the card content to keep button at the bottom for all cards.