Grid elements grow at the same time in Tailwind CSS

I'm trying to create two side-by-side containers in Tailwind CSS, that grow independently.

My problem is that they are growing at the same time, i.e. when I click on a Question, both containers increase their size. I want only to grow the one from the selected question.

I've also tried with flexbox, but the result is the same.

Here's the code

<div class="mt-10 mx-20 grid gap-14 md:grid-cols-2">
  <!-- First container (left) -->
  <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
    <h1 class="text-xl font-bold py-2">Container 1</h1>
    <div>
      <details class="pt-6 pb-4">
        <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
          Question
        </summary>
        <span class="pt-2 pr-8">Answer</span>
      </details>
    </div>
  </div>
  <!-- Second container (right) -->
  <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
    <h1 class="text-xl font-bold py-2">Container 2</h1>
    <div>
      <details class="pt-6 pb-4">
        <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
          Question
        </summary>
        <span class="pt-2 pr-8">Answer</span>
      </details>
    </div>
  </div>
</div>

Here's the fiddle Obs: you have to have the screen at medium breakpoint or higher to see