I have a layout that consists of a list a components/cards that contain information laid out on a grid (grid A). I can align the elements of these using grid-cols-subgrid.

When the card is "expanded", a separate component/card is shown below it in it's own separate grid layout (grid B). I'm struggling to find a way to align the elements of these grids, since they are nested inside the parent of grid A. I've searched around but either it's not a common requirement or I am not able to describe it properly.

Here's a tailwind play example layout: https://play.tailwindcss.com/uGcQ27u3ar