Заставьте Item уйти в самый низ, используя Flexbox и Material UI

Я пытаюсь добавить неназначенный текст в нижнюю часть моего контейнера, как показано на этом макете:

Ниже приведен код, который у меня есть до сих пор. Я изо всех сил пытаюсь заставить работать границу между кнопкой воспроизведения. Я пробовал обычные css: bottom:0 и position:relevant вместе с Flexbox, но, похоже, он не хочет идти в самый низ контейнера.

 const styles = theme => ({
  root: {
    flexGrow: 1,
    overflow: 'hidden',
    padding: theme.spacing(0, 3),
  },
  paper: {
    maxWidth: 800,
    margin: `${theme.spacing(2)}px auto`,
    padding: theme.spacing(2),
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
  playButton: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
    "& .playButton": {
      position: "absolute",
      top: "60%",
      left: "-55px",
      transform: "translateY(-50%)",
    },
      "& .star-rating": {
        "& .fa-star": {
          "&:hover": {
            "&::before": {
              content: "\f005",
              color: "yellow"
            }
          }
        }
      },
    },
});

function Tasks(props) {
  const { classes } = props;
  return (
    <div className = {classes.root}>
      <Paper className = {classes.paper}>
        <Grid container spacing = {2}>
          <Grid item xs = {12} sm container>
            <Grid item xs container direction = "column" spacing = {2}>
              <Grid item xs>
              <div className = "name-label">
              Name
              </div>
              <Typography variant = "h6" gutterBottom>
              {props.name}
              </Typography>
              <div className = "form-divider"></div>
                <Typography variant = "body2" color = "textSecondary">
                {props.description}
                </Typography>
              </Grid>
            </Grid>
            <Grid item classes = {{ root: props.classes.playButton}}>
    <Grid item xs = {3} className = "playButton">
      <i class = "far fa-play-circle fa-2x"></i>
    </Grid>
    <div className = "workers-assigned-label">
      Workers Assigned
    </div>
    <Typography variant = "h6" gutterBottom>
        0/25
      </Typography>
      <div class = "star-rating">
        <label class = "far fa-star fa-2x"></label>
        <label class = "far fa-star fa-2x"></label>
        <label class = "far fa-star fa-2x"></label>
      </div>
    <div className = "dropdown-menu">
  <h5>Unnassigned</h5>
</div>
  </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

export default withStyles(styles)(Tasks);

Любой вклад был бы замечательным.