I have 3 card in a row. Each card has 2 sections and contains dynamic texts.It looks like this:
<div class="card "><div class="card__wrapper"><div class="bundle-top"><span class="bundle-title">Lorem ipsum</span><p class="bundle-description"> Lorem ipsum</p><span class="price"><span class="price-value">299</span></span><div class="cta__wrapper"><a class="button tiny button__tertiary" href="/"><span>Start Trial</span></a></div></div><div class="data"><ul><li> Lorem ipsum</li><li> Lorem ipsum</li></ul></div></div></div>I would like to have the same height of all cards (as the highest) but I would also like .bundle-top to have the same height on all cards, it sholud take the height of the highest as well. I would like this for .data element too.
I would like it to look like this:
I use flex, and have added flex:1 to the elements that I would like to have the same height but it dosnt work. The only thing thats working is that all cards have the same height.
This is the css that I have so far:
.card{ display:flex: flex-direction:column; flex:1}.card__wrapper{ display:flex: flex-direction:column;}.bundle-top{ flex:1;}.data{ flex:1;}Actually I have tried a lot of different things but I dont have that css any more