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.


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

Or you can use Grid system with Typography

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

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 p={1} bgcolor="grey.300">
         {type || 'Please Select'}
Material UI, 2 Text Left and Right

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.