Как добавить элементы в столбец с помощью Flexbox и Material UI

Я ищу несколько советов, так как я не могу расположить эти элементы в модальном окне. Я хочу добавить счетчик элементов в виде текста и звездочек внизу. С неназначенным текстом внизу. Я пробовал много макетов. Это мой код до сих пор:

 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",
      "& .rating": {
        flex: 1
    },
  }
});

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">
              Order cofee beans
              </Typography>
              <div className = "form-divider"></div>
                <Typography variant = "body2" color = "textSecondary">
                  Process of 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>
    <div>
      count / total
    </div>
    <div className = "rating">
      Stars go here
    </div>
    <div>
      unassigned
    </div>
    </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

export default withStyles(styles)(Tasks);

Я добавил изображение скриншота дизайна, чтобы было понятно, чего я пытаюсь достичь.

Изображение: введите описание изображения здесь