How to make one card's height same as other cards in material-ui?

Question

I am trying to have 3 horizontal cards with the same height and it must be responsive. So the issue is coming that if the content of one card is larger than the other's, the card's height is not the same and one card look's bigger in height than the other. So I generally want a fixed height of these 3 cards so that whether the content is less or more, all the 3 cards must have the same height accordingly.

I am using "Material-UI" in this and used the Card component from it.

<Grid container spacing={2}>
 <Grid item>
   <Card>
     Card 1
   </Card>
 </Grid>
<Grid item>
   <Card>
     Card 2
   </Card>
 </Grid>
<Grid item>
   <Card>
     Card 3
   </Card>
 </Grid>
</Grid>

If I tried using Grid's component as "Card", then it works fine with the height of all the cards are constant regardless of content present inside them. But then I cannot provide spacing between the cards and hence the structure looks quite compact.

<Grid container spacing={2}>
 <Grid item component="Card">
     Card 1
 </Grid>
<Grid item component="Card">
     Card 2
 </Grid>
<Grid item component="Card">
     Card 3
 </Grid>
</Grid>

Answer 1

You can try

<Card style={{ height: '100%' }}>