I am facing a challenge with my dashboard layout that consists of 3 cards, each containing a separate component. The height of the cards dynamically adjusts based on their content. My goal is to make all 3 cards have the same height as the one with the tallest content. In other words, if one card expands in height, I want the other 2 to follow suit. I am working with MUI for React to achieve this. Essentially, the dashboard is structured with a top row featuring 3 components styled with Cards.
<Container maxWidth="lg">
<Grid container spacing={2}>
<Grid item xs={6}>
<Component1/>
</Grid>
<Grid item xs={3}>
<Component2/>
</Grid>
<Grid item xs={3}>
<Component3/>
</Grid>
</Grid>
</Container>