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

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

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

collapsed rows:

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

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