Tailwind - Keep dimensions in sync across elements in a grid so they grow vertically in equal dimensions when contant changes

Question

Tailwind Playground https://play.tailwindcss.com/Q7z8BXMRKK

I have a 3 block card, the header (title and subtitle) , the body content and the footer.

  <div class="bg-surface flex h-full flex-col">
    <div class="bg-pink-700">
      <div class="text-2xl">title and subtitle</div>
      <div>
        I'm title and subtitle content container and I should grow or shrink to match the dimensions of the other grid element title and subtitle, so they stay vertically aligned with the same dimensions.
      </div>
    </div>

    <!-- fields container -->
    <div class="flex flex-col bg-lime-400 p-3">
      I'm an input field content container , the fields container on the right should grow to matchthe dimensions of the other grid element field container , so they stay vertically aligned with the same dimensions.
      <slot />
    </div>

    <!-- footer  -->
    <div class="flex flex-col bg-lime-200 p-3">
      I'm a footer content container and same as the other 2 sections above, I should have the same dimensions as the other grid footer sections in the grid iteration of this component. 
    </div>
  </div>

When this is used in a grid, I need to keep the dimensions in sync, so the 3 blocks are always equal in height using flex box. I got seriously stuck here. I'm showing what I mean more in detail in the playground.

Answer 1

Let me know if this works for you

<div class="grid grid-cols-2 gap-1">
    <div>
        Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1 Header1
    </div>
    <div>
        Header2 Header2 Header2 Header2 Header2 Header2 Header2 Header2
    </div>
    <div>
        Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1 Body1
    </div>
    <div>
        Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2 Body2
    </div>
    <div>
        Footer1 Footer1 Footer1 Footer1 Footer1 Footer1 Footer1 Footer1
    </div>

    <div>
        Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2 Footer2
    </div>
</div>

Here is the link to it : https://play.tailwindcss.com/8Uw3qEM4sM