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

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 didnt work. Im pretty new to CSS and styling so im not sure what the best approach for this situation is. Any help or alternative suggestions are greatly appreciated :)

CodePudding user response：

<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>