Make Item go the bottom using Flexbox and Material UI - css

Question

I am trying to add Unassigned Text to the bottom of my Container, as shown in this mockup:
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: bottom:0 and position:relevant Along with Flexbox but it doesn't seem to want to go to the very bottom of the container.
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);
Any input would be great.

Answer 1

I would recommend starting with a Grid 'skeleton' that looks something like:
<Grid container>
<Grid item container xs={8} direction="column" justify="flex-start">
// Left column contents, with each row as a <Grid item>
</Grid>
<Fab className={classes.fab}><PlayIcon /><Fab>
<Grid item container xs={4} direction="column" justify="space-between" className={classes.right}>
// Right column contents, with each row as a <Grid item>
</Grid>
</Grid>
The direction=column will help you position items vertically within each container. The justify=space-between will ensure that your first item is at the top of the container and your last item (the unassigned text) is at the bottom.
The "right" css class looks like:
right: {
borderLeft: `1px solid ${theme.palette.grey[500]}`,
position: "relative"
}
You can give it a position of "relative" to make it easier to position the fab relative to the column. The "fab" class looks like:
fab: {
position: "absolute",
margin: "auto",
top: 0,
bottom: 0,
left: -28
}
The margin, top, and bottom properties help center the fab vertically, and the left is a bit of a hack based on the dimensions of the fab to center it over the border.
Here's a working draft that brings everything together: https://codesandbox.io/s/tender-torvalds-dlbke?fontsize=14

Answer 2

You can try something like this, or give flex: 1 to anything in the column to make it stretch.
const styles = theme => ({
playButton: {
'& .dropdown-menu': {
marginTop: "auto"
}
}
})