How to align left for Item1 and align right for Item2 & Item3 with MUI React?

I have one component, which have three different Typography components inside. I want to align “summary” to the left, and ‘miles’ and ‘duration’ to the right.

My code is below:

<Stack direction="row" spacing={1} divider={<Divider orientation="vertical" flexItem />} justifyContent='flex-end'>
    <Box align='left'>
        <Typography>Summary</Typography>
    </Box>
    <Box>
        <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><DirectionsCarIcon /> {Math.round(totalDistance * 0.000621371192 * 10) / 10} Miles</Typography>
    </Box>
    <Box>
        <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><AccessTimeIcon /> {totalDuration}</Typography>
    </Box>
</Stack>

I tried messing around with the justifyContent attribute but didn’t work. I’m pretty new to CSS and styling so not sure what the best approach for this situation.

Answer

<Stack direction="row" spacing={1} divider={<Divider orientation="vertical" flexItem />} justifyContent='space-between'>
    <Box align='left'>
        <Typography>Summary</Typography>
    </Box>
    <Stack direction="row" justifyContent={"flex-end"} spacing={1}>
      <Box>
          <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><DirectionsCarIcon /> {Math.round(totalDistance * 0.000621371192 * 10) / 10} Miles</Typography>
      </Box>
      <Box>
          <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><AccessTimeIcon /> {totalDuration}</Typography>
      </Box>
    </Stack>
</Stack>