Content layout alignment between two wrapper elements

Question

Basically what im trying to achieve is the following currently -> desired result

I have a wrapper that displays x amount of cards in a 2 column layout, and each pair's content should be aligned according to the card with the largest content. both cards share the same content layout with the same css.

So any ideas or implementations that could push me in the right direction are welcome, thanks :) (without using fixed heights in the styling)

Using: React & Sass

Please provide enough code so others can better understand or reproduce the problem. — Community, Sep 28 '22 at 19:58
css grids, here is a good reference : https://css-tricks.com/snippets/css/complete-guide-grid/ — jeremy castelli, Sep 28 '22 at 19:59

score -1 · Answer 1 · answered Sep 28 '22 at 19:40

-1

you can use flexbox. using a fixed height for the inner boxes that doesn't expand and align them at the bottom. The blue text expands, set flex-grow property on it

answered Sep 28 '22 at 19:40

Gianpaulo

332
2
7

i thought about that, but im looking for a solution without fixed heights, thanks though :) – Alonso Sep 28 '22 at 19:46
If you have more than one item with the dynamic height you should loop over all the elements, find the higher and set every node with that height, but you will need to do with js. – Gianpaulo Sep 28 '22 at 20:16

Content layout alignment between two wrapper elements

1 Answers1