How can I align the last Material UI item in a flex row to the right?

Question

I am trying to write a React App that has text lined up in a row, and I want the last item to be aligned to the far right. I am using Material UI with a Box API to contain all my elements, with each item being a Typography element.

<Box display="flex" flexDirection="row" alignItems="flex-start">
     <Typography align='left' className={classes.currentlyPrinting}>
          Currently printing:
     </Typography>
     <Typography align='left' className={classes.filenameText}>
          Filenamjoojpe
     </Typography>
     <Typography className={classes.completion}>
          (3 of 4 completed)
     </Typography>
     <Box justifyContent="flex-end">
          <Typography className={classes.percentage}
                style={{display: 'inline-block'}}>30%
           </Typography>
     </Box>
</Box>

So I tried putting the last Typography element within a box container, and used "justifyConent = flex-end" but it did not work out. The following image shows what I want to happen:

So I want the text that says "30%" to be aligned with the right side of that progress bar I have. The reason for this is that the other three typography elements can have varying characters of text, so I cant just use padding for it. Any ideas?