title: How do I layout forms in MaterialUI?
body: <p>I'm trying to structure the following form layout using MaterialUI Grid components and fields:</p>
  
  <pre><code>+-----------------------------------------+
  |Form                                     |
  |                                         |
  | +--------------+ +----------------+     |
  | |Field_1       | |Field_2         |     |
  | +--------------+ +----------------+     |
  | +--------------+ +---------+ +--------+ |
  | |TextArea      | |Popup_A1 | |Popup_A2| |
  | |              | +---------+ +--------+ |
  | |              | +---------+ +--------+ |
  | |              | |Popup_B1 | |Popup_B2| |
  | |              | +---------+ +--------+ |
  | |              | +---------+ +--------+ |
  | |              | |Popup_C1 | |Popup_C2| |
  | |              | +---------+ +--------+ |
  | |              |                        |
  | +--------------+                        |
  +-----------------------------------------+
  </code></pre>
  
  <p>My understanding may be a bit wonky, and the Popups are showing up as minimal squares. The page structure looks like this (simplified):</p>
  
  <pre><code>&lt;Form&gt;
    &lt;Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1}&gt;
      &lt;Grid container xs="12" spacing="1"&gt;
        &lt;Grid item xs={12} sm={6}&gt;
          &lt;Field name="Field1" ... fullWidth /&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs={12} sm={6}&gt;
          &lt;Field name="Field2" ... fullWidth /&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
      &lt;Grid container xs={12} &gt;
        &lt;Grid container xs={4} sm={4} &gt;
          &lt;Field  fullWidth multiline component={TextField} /&gt;
        &lt;/Grid&gt;
  
        &lt;Grid container xs={8} sm={8}&gt;
          &lt;Grid container &gt;
            &lt;Grid item&gt;
              &lt;TextField name="Popup_A1" fullWidth select&gt;
                &lt;MenuItem key="1" value="1"&gt;
                  Large Text
                &lt;/MenuItem&gt;
                &lt;MenuItem key="2" value="2"&gt;
                  Ooh Some Large Text
                &lt;/MenuItem&gt;
                &lt;MenuItem key="3" value="3"&gt;
                  Another Large Text Choice
                &lt;/MenuItem&gt;
                &lt;MenuItem key="4" value="4"&gt;
                  No, LOOOONG Text
                &lt;/MenuItem&gt;
              &lt;/TextField&gt;
            &lt;/Grid&gt;
            &lt;Grid item&gt;
              &lt;TextField name="Popup_A2" fullWidth select&gt;
                &lt;MenuItem key="1" value="1"&gt;
                  Large Text
                &lt;/MenuItem&gt;
                &lt;MenuItem key="2" value="2"&gt;
                  Ooh Some Large Text
                &lt;/MenuItem&gt;
                &lt;MenuItem key="3" value="3"&gt;
                  Another Large Text Choice
                &lt;/MenuItem&gt;
                &lt;MenuItem key="4" value="4"&gt;
                  No, LOOOONG Text
                &lt;/MenuItem&gt;
              &lt;/TextField&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
  
        &lt;Grid container xs={8} sm={8}&gt;
          &lt;Grid container &gt;
            &lt;Grid item&gt;
              &lt;Field name="Popup_B1" ... fullWidth select &gt;....&lt;/Field&gt;
            &lt;/Grid&gt;
            &lt;Grid item&gt;
              &lt;Field name="Popup_B2" ... fullWidth select &gt;....&lt;/Field&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
  
        ...
  
      &lt;/Grid&gt;
   &lt;/Grid&gt;
  &lt;/Form&gt;
  </code></pre>
  
  <p>Can someone put me out of my misery and let me know what I'm doing wrong, or possibly point me at a resource for structuring forms like this?</p>
  
  <hr>
  
  <h1>Edit</h1>
  
  <p>I've added in the <code>MenuItem</code> elements to Venkovsky very helpful code sandbox... and it illustrates exactly what I mean. The pop-ups are very, very narrow. :-(</p>
  
  <p><a href="https://i.stack.imgur.com/TnBjQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TnBjQ.png" alt="overlapping, narrow pop-up menus"></a></p>