Pretty simple problem. I have multiple cards representing my projects. I am trying to make them equal height, equal width, evenly spaced, and centered. I have everything except the equal height. Right now I am using only a few lines of CSS to get the job done. I have been messing around for a while and can not seem to get it right. I have been using flex-box. Thank you for taking the time to help me out.
I am going to provide two of the six articles in my JSX and my CSS. Obviously the other 4 articles look the same as the 2 I provided. I am also using some imported classes due to react material ui.
div { text-align: center;}article { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); display: inline-flex; justify-content: space-evenly; align-items: stretch; margin: 20px; flex-grow: 1;}<div><article><Card className={classes.card}><CardActionArea><CardMedia component="img" alt="Workflow Project" height="140" image={WorkFlow} title="Workflow Project" /><CardContent><Typography gutterBottom variant="h5" component="h2"> Work Flow</Typography><Typography variant="body2" color="textSecondary" component="p"> A full stack web application. The front end uses React, Redux, and React Router. The backend uses Firebase. The web application is a way for multiple people to post projects to be seen by all users. It is complete with login/signup, authentication, cloud functions, storing all data in a database, and live notifications. It is super Mario themed.</Typography><br /><Typography variant="body2" color="textSecondary" component="p"> When visiting the site use the credentials mario@test.com and test1234 to login. Or feel free to make an account.</Typography></CardContent></CardActionArea><CardActions><a href="https://work-flow-web-app.firebaseapp.com/" target="_blank" rel="noopener noreferrer"><Button size="small" color="primary"> Visit Site</Button></a><a href="https://github.com/Amalazing/Work-Flow" target="_blank" rel="noopener noreferrer"><Button size="small" color="primary"> Visit Code</Button></a></CardActions></Card></article><article><Card className={classes.card}><CardActionArea><CardMedia component="img" alt="Excersise Tracker" height="140" image={MERN} title="Excersise Tracker" /><CardContent><Typography gutterBottom variant="h5" component="h2"> Exercise Tracker</Typography><Typography variant="body2" color="textSecondary" component="p"> This project is a web application that allows multiple people to track and compare exercises. I wrote this project using the MERN stack. I used React for the front end and Node (with Express), MongoDB (Atlas) on the back end. React interacts with the Node API using Axios HTTP requests.</Typography><br /><Typography variant="body2" color="textSecondary" component="p"> By visiting the video you will be sent to a vimeo page where you can view the project in action!</Typography></CardContent></CardActionArea><CardActions><a href="https://vimeo.com/355889426" target="_blank" rel="noopener noreferrer"><Button size="small" color="primary"> Visit Video</Button></a><a href="https://github.com/Amalazing/MERN-Exercise-Tracker" target="_blank" rel="noopener noreferrer"><Button size="small" color="primary"> Visit Code</Button></a></CardActions></Card></article>