javascript - How to align buttons in cards vertically in center in React using Material-UI?

Question

I have made 3 cards in ReactJS using material-ui, so the problem I am facing is that the first card's paragraph is small and the second and third card's paragraph is a bit bigger so when I am placing my button the position of the button differ in all the 3 cards and because of that each paragraph buttons are not aligned properly in vertically center.

I have attached the image of the problem I am facing. [1]: https://i.stack.imgur.com/ZkGVc.jpg

Here is the CodeSandBox link :-https://codesandbox.io/s/vigilant-sanderson-yp491?fontsize=14&hidenavigation=1&theme=dark

Below is my ReactJS and material-ui code

const Room = ({room}) => {
    const classes = useStyles() ;
    return (
    <Card className={classes.root}className={classes.cards}>
        <CardMedia className={classes.media} image={room.image} title={room.name}/>
        <CardContent>
                  <div className={classes.CardContent}>
                      <h2>{room.name}</h2>     
                <Typography>
                    {room.description}
                </Typography>
                 </div>
                 <Button variant="outlined" color="primary" justify="space-around">
                Primary
            </Button>
                  </CardContent> 
                  <CardActions disableSpacing className={classes.CardActions}>
                  </CardActions>

    </Card>
    )
}

style.js

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles(() => ({
    media: {
    height: 280,
  },
  cards:{
    height:600
  },
  cardContent: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  cardActions: {
    justifyContent: 'space-between',
  },
  buttons: {
    display: 'flex',
    alignItems: 'center',
  },
  h5:{
    fontfamily: 'Ubuntu',
  },

}));

How can I align those buttons in each card vertically in the center while keeping the size of the paragraph the same?

Answer 1

As mentioned in the comment, if I understand well what you're trying to achieve, one possible solution would be to have the description have a fixed height. You can then add a scrollbar to it, and therefore the buttons will be aligned. Alternatively, instead of the scrollbar you could use a "show more" button to expand the content.

I have updated the codepen with an example using the browser native scrollbar - codepen

To enhance the solution you could look into using a slim scrollbar solution, such as react-perfect-scrollbar