Seeking advice on achieving a centered play button with borders in this layout. Struggling with flexbox to position the play button within the code provided.
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>
Order cofee beans
</Typography>
<div className="form-divider"></div>
<Typography variant="body2" color="textSecondary">
Process of Description
</Typography>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle">Workers Assigned</Typography>
<Grid item xs={3}>
<i class="far fa-play-circle"></i>
</Grid>
<Typography variant="h6" gutterBottom>
0/25</Typography>
</Grid>
</Grid>
</Grid>
</Paper>
</div>
);
}
Currently unsure if the issue lies with the Grid structure or if a different approach is needed. Any feedback on achieving the intended layout (linked below) would be appreciated: