title: Mui Grid Item Fixed Width Item Beside Fill Width Item
body: <p>I'm currently using <em>MUI Grid</em> (but <strong>I'm open to alternate solutions</strong>) and I want two components side by side: the right most taking up 400px of width and the left component taking up the rest.</p>
  <p>|&lt;------------------------------- 100% of page -------------------------------&gt;|</p>
  <p>|&lt;-------------------- Fill --------------------&gt;| |&lt;---------- 400px -----------&gt;|</p>
  <p>When page width is shrunk:</p>
  <p>|&lt;-------------------- 100% of page --------------------&gt;|</p>
  <p>|&lt;--------- Fill ---------&gt;| |&lt;---------- 400px -----------&gt;|</p>
  <p>My code is currently stretching the <code>leftComponent</code> to 100% of the page and pushing the <code>rightComponent</code> below it.</p>
  <pre><code>&lt;Grid container spacing={3}&gt;
      &lt;Grid item xs={12} &gt;
          &lt;leftComponent /&gt;
      &lt;/Grid&gt;
      &lt;Grid item style={{width: &quot;400px&quot;}}&gt;
          &lt;rightComponent /&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>