Material UI card content height/cardcontent fixed to bottom

Question

I am currently mapping material-ui cards that gets information from a JSON object so therefore information within it will vary from time to time and take a different amount of space. I wanted a fixed height for each card which I have accomplished, however, the content is not in line.

A screenshot of how it looks

I have all the cards in rows of three. As you can see the last card's content is not in line with the other 2. I would like to have the button and graph fixed to the bottom of the card or even having a fixed height for the content above the graphs so the graph and button is in place at the bottom. I have struggled to no ends to get it to work. Any help would be very appreciated.

Here is my code:

<Grid key={item.Qid} item xs={12} sm={4}>
  <Card className={classes.cards}>
    <div className={classes.details}>
      <CardContent>
        <Typography component="h5" variant="h5" align="center">
          Question
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Qid}
        </Typography>
        <Typography variant="subtitle1" color="textSecondary">
          {item.Question}
        </Typography>
        <Typography component="h5" variant="h5" align="center" className={classes.space}>
          Sentiment
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Sentiment}
        </Typography>
      </CardContent>

      <CardMedia className={classes.cover}>
        {item.Sentiment ? renderPieChartForSentimentAnalysis(item.SentimentScore) : "No data to display"}
      </CardMedia>

      <div align="center" className={classes.space}>
        <Button variant="outlined" color="primary" onClick={() => setupDialog(item.Answers)}>
          Answers
        </Button>
      </div>
    </div>
  </Card>
</Grid>;

And this for styles:

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  cards: {
    padding: theme.spacing(2),
    height: "95%",
  },
  details: {
    display: "flex",
    flexDirection: "column",
  },
  space: {
    marginTop: theme.spacing(1),
  },
}));

Answer 1

Here you go with a solution

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  cards: {
    padding: theme.spacing(2),
    height: "95%",
  },
  details: {
    display: "flex",
    flexDirection: "column",
  },
  space: {
    marginTop: theme.spacing(1),
  },
  question: {
    overflow: "hidden",
    display: "-webkit-box",
    WebkitLineClamp: 2,
    WebkitBoxOrient: "vertical"
  }
}));

<Grid key={item.Qid} item xs={12} sm={4}>
  <Card className={classes.cards}>
    <div className={classes.details}>
      <CardContent>
        <Typography component="h5" variant="h5" align="center">
          Question
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Qid}
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" className={classes.question}>
          {item.Question}
        </Typography>
        <Typography component="h5" variant="h5" align="center" className={classes.space}>
          Sentiment
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Sentiment}
        </Typography>
      </CardContent>

      <CardMedia className={classes.cover}>
        {item.Sentiment ? renderPieChartForSentimentAnalysis(item.SentimentScore) : "No data to display"}
      </CardMedia>

      <div align="center" className={classes.space}>
        <Button variant="outlined" color="primary" onClick={() => setupDialog(item.Answers)}>
          Answers
        </Button>
      </div>
    </div>
  </Card>
</Grid>;

question class will restrict the number of lines to 2.