Align Typography Component To The Right

I would like to align two typography components on the same line so that one is aligned to the left and the other to the right. How do I achieve this? This is the code I have but t

Solution 1:

If you're using Mui, why not use their props - it'll keep it easier then your own styles. You will also have to put the p elements within a div - if you use Grid you can use flex box "space-between" to push each element to either side.

<Grid container justify="space-between">  
  <Typography inline variant="body1" align="left">Choose New Support:</Typography>
  <Typography inline variant="body1" align="right">some text</Typography>
</Grid>