I want "-67% off" and all the elements below it in the first flexbox to match the same elements height in the second flexbox.
I am already usingstyle="margin-top:auto;" in the divs that contain the offers(67% OFF NOW & 40% OFF NOW), but it doesn't align at the bottom.
And this is how I want it to look:
What is more, when viewing this code in mobile or by making the browser window smaller the three divs are aligned at the bottom successfully.
What am I missing?
There two ways to go about it.
The general way
Wrap the image product and title in a wrapper with min-height. Obviously, the min-height should be sufficient for the tallest of them.
The specific way
This is generally better because instead of hard-coding a min-width of all products on the page, it simply makes them adjusts to the height of the tallest in the row. You still need a wrapper around the image and product title but, instead of the min-height, you give the entire product
... and give the said wrapper flex-grow: 1. This will make all products in the row grow to match the tallest and the extra height is given to the only child element with flex-grow: 1 (which is your wrapper).