Reactjs MUI 卡组件上的文本未正确对齐

我是新的react ，我一直在遵循一个课程，并建立一个示范项目.我试过了，但由于某些原因，我无法在一张只有一行描述的卡片上对齐price个文本.事实上，我希望price出现在卡片的左下角.这就是我的代码.任何建议都将不胜感激.

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个