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