Material UI, 2 Text Left and Right

When coming to material ui, sometimes you will hardly find how to place 2 text in 2 div tag side by side and adjust left and right.

html

<div>
  <div style={{float:left}}>This is:</div>
  <div style={{float:right}}>Hello World</div>
</div>

Or you can use Grid system with Typography

<Grid container spacing={3} className={classes.gap}>
  <Grid item xs={4} sm={4}>
     <Typography align="left">Service Type:</Typography>
  </Grid>
  <Grid item xs={8} sm={8}>
     <Typography align="right">{type}</Typography>
  </Grid>
</Grid>

Or you can mix with Typography and Box

 <Typography component="div">
   <Box display="flex" p={1} bgcolor="background.paper">
     <Box p={1} flexGrow={1} bgcolor="grey.300">
       Service Type:
     </Box>
     <Box p={1} bgcolor="grey.300">
         {type || 'Please Select'}
     </Box>
   </Box>
</Typography>