Mui LinearProgress Bar stops displaying on display flex

Question

I'am trying to make a custom bullet graph with material UI, my idea is 2 MuiLinearProgress bar next to each other with a vertical Divider in between. I can't seem to find a way to display them next to each other.

<div className={classes.bulletGraph}>
  <div>
   <LinearProgress
    className={classes.firstBar}
    value={80}
    variant="determinate"
    title="test"
   />
  </div>
  <div>
   <LinearProgress
    className={classes.secondBar}
    value={0}
    variant="determinate"
   />
  </div>
</div>

I tried using display flex on the parent but it makes them disappear, I also tried inline block and I got the same result.

Answer 1

Wrap your <LinearProgress> with <Grid> component.

<Grid spacing={1} container>
    <Grid xs item>
        <LinearProgress value={80} variant="determinate" title="test" />
    </Grid>
    <Grid xs item>
        <LinearProgress color="secondary" value={0} variant="determinate" />
    </Grid>
</Grid>

Live demo

You can set different spacing and ratios beetween items.