Sytling a CMS product comparison grid

Hey guys,

I’m making a CMS product comparison chart that compares pros, cons, etc of products from different companies. The way I have it set up on desktop, each grid column is a collection item and the grid is made up of 6 individual 1col/4row grids (far left column with the row titles is also a CMS item)

https://preview.webflow.com/preview/creators-internet?utm_medium=preview_link&utm_source=designer&utm_content=creators-internet&preview=46d037d2d92e9c538508c62b229e99cd&pageId=637561a03a87f0dd741ec453&itemId=637561d065f7b5d7835f9c17&workflow=preview

I want to set it up so that each grid box expands to contain all of the text as the screen shrinks. I also need the lines of each invidual column’s rows to stay aligned (height of each cell in a row has to be equal even though all they’re all from different grids)

When I set each row’s height to auto, the borderlines get misaligned

But when I set the row heights to a hard number, the tezt overflows

I don’t work with grids a ton and I haven’t been able to figure out a solution that keeps the borderlines aligned but also doesn’t make text overflow out of grid cells.

Anyone have any fixes or a better solution? Thanks in advance!