How to not affect other grid items sizes after changing one item size

I have a FAQ section which uses grid to position items. I need to make two colummns, but when I click on question, dropdown resizes the other item in the nearby column.FAQ before clicking on item
FAQ after clicking on item

Here is my code for the grid layout:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 11px;

  .question {

  }
}

I tried using grid-template-rows: repeat(auto-fill, minmax(0, 1fr)); but it stays the same because of 1fr. If I change 1fr to fixed pixel size, the dropdown won’t open. Any ideas?