I'm looking to achieve equal heights for these grid items without distorting them.
Here's the current layout:
This is how I would like it to look:
My challenge is that adjusting the image width manually makes it non-responsive. Since users may replace this image, fixed dimensions are not feasible. Any suggestions are welcome. Here is the essential code snippet (content within the card has been removed for brevity):
Please note: material-ui v4 was used
<Grid container spacing={3}>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Grid container spacing={3} className="mb-3">
<Grid item xs={12} md={3}>
<Card
className="justify-between items-center p-sm-24 bg-paper dashboard-card"
elevation={6}
>
</Card>
</Grid>
<Grid item xs={12} md={3}>
<Card
className="justify-between items-center p-sm-24 bg-paper dashboard-card"
elevation={6}
>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card className="bg-paper" elevation={6}>
<CardContent className="flex justify-center">
<img
src={this.state.logo}
alt="logo"
style={{ width: "100%" }}
/>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
</Grid>