Flexbox columns: different headers' length

HTML-CSS
1

I’ve been working on a product landing page trying to implement some suggestions from the forum and encountered a problem. Googling didn’t help much, possibly because I couldn’t come up with a good search description.

The problem is, I have three flexbox items as columns that contain a header, an image, a text (price) and a button. Now, two of my headers are longer and wrap to the next line while the other one doesn’t which resulted in all three elements not being properly aligned.

The only solution I could think of (beside changing two headers’ font size or making their text shorter) is to add an invisible line or invisible characters to the third (shorter) header. I wasn’t able to find a way to do it that works - &nbsp and <br> didn’t seem to help and making the font the same color as the background or very small doesn’t sound like a proper solution.

Here’s my pen: https://codepen.io/sad_caterpillar/pen/WBoRvG

Am I thinking in the right direction with adding additional invisible characters? If so, how can I do it? Or perhaps there is a better solution?

2

Might be easier to just give them a min-height

.item-names {
  font-weight: bold;
  background-color: #7A7977;
  padding: 20px;
  margin-top: 0px;
  /* min height and centering */
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
3

Thanks, Lasjorg! That worked perfectly.