reactable affects height of all cards containing reactable in quarto dashboard

I suspect this has something to do with css / html which my knowledge is quite rudimentary. I also am not sure if this would be more appropriate to ask in quarto or somewhere else e.g. for html/css specific advice. Let me know if this is not appropriate to ask for help here!

Description of the problem:

I expect that in quarto documents, a reactable with expandable rows in card 1 will control card 1's height when rows are expanded. However, I noticed if I have another card (call it card 2) with another reactable, then it's height will also expand, even though it is a distinct reactable.

Here is a MRE:

---
title: "test"
format: 
  dashboard:
    scrolling: true
editor_options: 
  chunk_output_type: console
---

## Row 

```{r}
library(reactable)
library(dplyr)
library(htmltools)
data <- unique(CO2[, c("Plant", "Type")])

make_rt <- function(x, ...) {
  reactable(
    x,
    details = function(index) {
      plant_data <- CO2[CO2$Plant == data$Plant[index], ] |> 
        slice(1:2)
      htmltools::div(style = "padding: 1rem",
                     reactable(plant_data, outlined = TRUE)
      )
    },
    ...
  )
}

data |>  slice(1:3) |>   make_rt(class = 'table-1')

Row

data |>  slice(3:6) |>   make_rt(class = 'table-2')



collapsed rows: 
![image](https://github.com/glin/reactable/assets/22013187/8e5314ab-e3c8-4799-859d-e0f82b8d8560)

Expanding rows in reactable 1 increase both card 1 and card 2 height

<img width="404" alt="image" src="https://github.com/glin/reactable/assets/22013187/c96b6c14-da57-4607-928c-40c5fc224f40">

But I don't want card 2 to expand when card 1 reactable is interacted with obviously.

glin / reactable

reactable affects height of all cards containing reactable in quarto dashboard #382

Row