How to make button stick to bottom in Material UI React Component?

Question

I am working on a building a general layout for a web app. I have hit a problem I am not sure how to solve.

My Grid looks as follows:

What I want is that the each section inside the card start at the same point.

For example, the icons are ok as each their tops are aligned.

The titles are also ok as their tops are aligned.

However, the content text is not ok, as the tops are not aligned amongst the three cards.

In addition, the learn more buttons should also be aligned, and ideally stuck to the bottom of the card. As can be seen they all sit at different heights.

My code looks as follows:

HomeGrid.jsx:

import React, { useState, useEffect, Fragment } from 'react'

import { useStyles } from '../styles'

import SimpleCard from '../card/SimpleCard'

import { Grid, Container, Paper } from '@material-ui/core'
import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer'
import FindInPageIcon from '@material-ui/icons/FindInPage'
import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet'

const HomeGrid = () => {
    const classes = useStyles()
    return (
        <Container disableGutters className={classes.homeGridContainer}>
            <Grid
                alignItems="stretch"
                alignContent="center"
                justify="center"
                wrap="wrap"
                container
                spacing={10}
            >
                <Grid item xs={12} md={4} align="center">
                    <SimpleCard
                        icon={<QuestionAnswerIcon fontSize={'large'} />}
                        title={'Speak'}
                        content={'Speaking to someone can help blah blah'}
                    ></SimpleCard>
                </Grid>
                <Grid item xs={12} md={4} align="center">
                    <SimpleCard
                        icon={<FindInPageIcon fontSize={'large'} />}
                        title={'Finding someone like this example can be great'}
                        content={'Finding to someone can help blah blah'}
                    ></SimpleCard>
                </Grid>
                <Grid item xs={12} md={4} align="center">
                    <SimpleCard
                        icon={<AccountBalanceWalletIcon fontSize={'large'} />}
                        title={'No Fees Here'}
                        content={'No Fees shalt find thou'}
                    ></SimpleCard>
                </Grid>
            </Grid>
        </Container>
    )
}

export default HomeGrid

SimpleCard.jsx:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import { CardActionArea, CardMedia } from '@material-ui/core'

import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer'

const useStyles = makeStyles({
    simpleCard: {
        minWidth: 275,
    },
    bullet: {
        display: 'inline-block',
        margin: '0 2px',
        transform: 'scale(0.8)',
    },
    title: {
        fontSize: 14,
    },
    pos: {
        marginBottom: 12,
    },
})

const SimpleCard = (props) => {
    const classes = useStyles()

    return (
        <Card style={{ height: '100%' }}>
            <CardContent>
                {props.icon}
                <Typography variant="h6" component="h2">
                    {props.title}
                </Typography>
                <Typography variant="body1" component="p">
                    {props.content}
                </Typography>
            </CardContent>
            <CardActions className={classes.actions}>
                <Button size="small">Learn More</Button>
            </CardActions>
        </Card>
    )
}

export default SimpleCard

I already tried implementing this answer: enter link description here but as you can see it doesn't work.

Can someone please guide / help me out here?

Answer 1

using flex will solve the issue.
set flex style properties display:'flex', justiyContent:'space-between', flexDirection:'column' to Card component.
It'll shift buttons of all the Cards to the bottom of the card.