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 -
<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?