Ensure height of grid depends only the first column's contents

I have a grid with two columns. The first column contains a vertically resizable element. The second contains a scrollable list. The grid needs to be as high as the resizable element is high.

JSFiddle

I tried wrapping the cards in an absolute wrapper, but that causes grid-auto-rows: 1fr to lose its effect. The two solutions recommended by this answer (height: 0; min-height: 100% and contain: size) have the same problem.

JSFiddle

How do I make it so that the grid's height depends only on the resizable element's height and not the scrollable list's, while ensuring that all cards have the same height?

I want a CSS-only solution.