Text not aligning properly on MUI card component - reactjs

Question

I am new to react, I've been following a course and building a demo project. I've tried but for some reason i can't align the price text on a card that has a single line of description. In fact, I want the price to appear on the bottom left of the cards. This is what my code looks like. Any suggestion would be appreciated.
import Card from '#mui/material/Card';
import CardContent from '#mui/material/CardContent';
import CardMedia from '#mui/material/CardMedia';
import Typography from '#mui/material/Typography';
const ItemCard = (props) => {
// return <div className={classes.card}>{props.children}</div>;
return (
<div>
<Card
sx={{
maxWidth: 345,
maxHeight: '100%',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.25)',
height: '350px'
}}
>
<CardMedia component='img' height='200' image={props.img} alt='icon' />
<CardContent>
<Typography gutterBottom variant='h5' component='div'>
{props.name}
</Typography>
<Typography variant='body2' color='text.secondary'>
{props.description}
</Typography>
<Typography style={{}}>TK. {props.price}</Typography>
</CardContent>
</Card>
</div>
);
};
export default ItemCard;
Please see this image

Answer 1

You can add a min-height css property in your description Typography component like below (make sure the height is enough for fitting two lines. In case you have longer than two lines of description you can add the ellipsis css properties like in this solution):
<Typography variant='body2' color='text.secondary' sx={{minHeight: "30px"}}>
{props.description}
</Typography>

Answer 2

You can do this!
<CardActions>
<Typography style={{}}>TK. {props.price}</Typography>
</CardActions>