title: Align typography component to the right
body: <p>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?</p>
  
  <p>This is the code I have but the components are aligned next to each other to the left.</p>
  
  <pre><code>const useStyles = makeStyles({
    leftText: {
      textAlign: "left"
    },
    rightText: {
      textAlign: "right"
    }
  });
  
  function ChooseNewSupport(props) {
      const classes = useStyles();
      return (
          &lt;DialogContent&gt;
          &lt;Typography inline variant="body1" className={classes.leftText}&gt;
            Choose New Support:
          &lt;/Typography&gt;
          &lt;Typography inline variant="body1" className={classes.rightText}&gt;
      &lt;/DialogContent&gt;
      );
  }
  </code></pre>