title: How to Align One Item Left, and Another Right using Material UI Grid Components
body: <p>I'm having a very difficult time trying to achieve something simple with the <code>Grid</code> Component from MaterialUI. Specifically, I'd like to align one item to the left, and another to the right on one layout row.</p>
  <p>I've searched extensively, and have not found any solutions that work. I've tried many suggestions, including the use of <code>justifyContent</code> and <code>alignContent</code> within a <code>Grid</code> component, and within JSS, and the <code>flex: 1</code> technique of 'pushing' content.</p>
  <h3>Relevant Code Snippets</h3>
  <p>Trying to put the <code>&lt;Typography&gt;</code> element on the left, and the <code>&lt;FormGroup&gt;</code> on the right:</p>
  <pre><code>&lt;Container&gt;
    &lt;Grid container spacing={3}&gt;
      &lt;Grid className={classes.rowLayout}&gt;
        // Goal is to align this to the LEFT
        &lt;Grid item xs={6}&gt;
          &lt;Typography variant=&quot;h6&quot; gutterBottom&gt;Some Text&lt;/Typography&gt;
        &lt;/Grid&gt;
        // Goal is to align this to the RIGHT
        &lt;Grid item xs={3}&gt;
          &lt;FormGroup&gt;
            // Simple `Switch` button goes here
          &lt;/FormGroup&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    &lt;/Grid&gt;
  &lt;/Container&gt;
  </code></pre>
  <p>MaterialUI JSS styling:</p>
  <pre><code>const useStyles = makeStyles(theme =&gt; ({
    root: {
      flexGrow: 1,
      width: '100%'
    },
    rowLayout: {
      display: 'flex',
      alignItems: 'baseline'
    },
  }));
  </code></pre>
  <p>I'm also finding that, generally speaking, this is requiring the use of many <code>Grid</code> components, and I'd love to write cleaner code if possible.</p>
  <p>Do you have any tips or fixes to this problem?</p>
  <p>Thanks a million,</p>
  <p>Davis</p>