I have cards with a title, a short description and a button.
Now I don't only want to have just the whole card in same height as the other cards around it, but also having all titles, all descriptions and all buttons to have the same height.
I can't get it to work. Making all cards the same height with flexbox is pretty easy, but getting all parts to have the same height is not.
E.g. for the title I can't just make it a fixed height because the titles have dynamic length and it could be some cards have a single line while others have multiple.
Any ideas how I could do this easily?
Edit: Here is some code I already have (simlpyfied, of course) https://codesandbox.io/s/stoic-snowflake-z6n1h?file=/index.html
I thought about a solution similar to this angular directive plugin, hoping it could be accomplished without the use of JS. Also I don't use angular in the project where I need this.
You could try to design the cards to accommodate a certain size of content and then you can make use of overflow:hidden; text-overflow: ellipsis; CSS properties to trim the extra long values down. You could also implement some hard limits in your back end or editing system to force users to be creative.
From a UX point of view you could also consider adding buttons or hover states that allows a user to see an expanded view.