title: Make Item go the bottom using Flexbox and Material UI
body: <p>I am trying to add Unassigned Text to the bottom of my Container, as shown in this mockup:<a href="https://i.stack.imgur.com/863cl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/863cl.png" alt="enter image description here"></a></p>
  
  <p>Below is the code, that I have so far. I am struggling to get the border between the play button working too. I have tried the usual css: <code>bottom:0</code> and <code>position:relevant</code> Along with Flexbox but it doesn't seem to want to go to the very bottom of the container. </p>
  
  <pre><code> const styles = theme =&gt; ({
    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",
      "&amp; .playButton": {
        position: "absolute",
        top: "60%",
        left: "-55px",
        transform: "translateY(-50%)",
      },
        "&amp; .star-rating": {
          "&amp; .fa-star": {
            "&amp;:hover": {
              "&amp;::before": {
                content: "\f005",
                color: "yellow"
              }
            }
          }
        },
      },
  });
  
  function Tasks(props) {
    const { classes } = props;
    return (
      &lt;div className={classes.root}&gt;
        &lt;Paper className={classes.paper}&gt;
          &lt;Grid container spacing={2}&gt;
            &lt;Grid item xs={12} sm container&gt;
              &lt;Grid item xs container direction="column" spacing={2}&gt;
                &lt;Grid item xs&gt;
                &lt;div className="name-label"&gt;
                Name
                &lt;/div&gt;
                &lt;Typography variant="h6" gutterBottom&gt;
                {props.name}
                &lt;/Typography&gt;
                &lt;div className="form-divider"&gt;&lt;/div&gt;
                  &lt;Typography variant="body2" color="textSecondary"&gt;
                  {props.description}
                  &lt;/Typography&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
              &lt;Grid item classes={{ root: props.classes.playButton}}&gt;
      &lt;Grid item xs={3} className="playButton"&gt;
        &lt;i class="far fa-play-circle fa-2x"&gt;&lt;/i&gt;
      &lt;/Grid&gt;
      &lt;div className="workers-assigned-label"&gt;
        Workers Assigned
      &lt;/div&gt;
      &lt;Typography variant="h6" gutterBottom&gt;
          0/25
        &lt;/Typography&gt;
        &lt;div class="star-rating"&gt;
          &lt;label class="far fa-star fa-2x"&gt;&lt;/label&gt;
          &lt;label class="far fa-star fa-2x"&gt;&lt;/label&gt;
          &lt;label class="far fa-star fa-2x"&gt;&lt;/label&gt;
        &lt;/div&gt;
      &lt;div className="dropdown-menu"&gt;
    &lt;h5&gt;Unnassigned&lt;/h5&gt;
  &lt;/div&gt;
    &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Paper&gt;
      &lt;/div&gt;
    );
  }
  
  export default withStyles(styles)(Tasks);
  </code></pre>
  
  <p>Any input would be great. </p>