I am trying to make these two boxes always be the same height in any responsive layout (the box on the right is smaller in height than the one on the right), but since the text is different lengths, the heights will change at different rates. Was wondering what the best way to do this is
Here is my site Read-Only: LINK
The easiest way is simply to set a fixed height, and then truncate the content with ellipses when it overflows that space.
hi @Tony_Lu there is a way how to do that but I had to completely rebuild what you have done. I had to add more divs to have more control as Flex can be a tricky. You can also try to set main wrapper for your cards array to CSS Grid to make you life easier but it is not essential. It is a lot work to make it correctly and explaining in written form will be a long article instead easy fix help.
You can search internet how these cards are done to get an idea how to. If you do not feel to rebuild it (IMO best solution anyway as conceptually your build is not optimal) just use truncating instead as @memetican suggested as it is also good idea to have control over text length to keep card compact.
m2c
