title: Alignment of grid items in Material-ui
body: <p>I'm working on a prototype to migrate a JavaFx window to a a web application using React.js &amp; Material Ui. The result must be as close as possible of the look&amp;feel of the JavaFx application.</p>
  <p>The layout of the windows was pretty basic, it looks like a form with multiple text fields to read or input data.</p>
  <p>I've 2 main questions as I'm having some difficulties to match with the expected layout. I'm using Material Ui and some grid components.</p>
  <ul>
  <li>First of all, how can I align the 3 left inputs fields (associated to AAAAAAA, FFF/FFF, HHHH so that the left borders of each input field are vertically aligned?</li>
  <li>Then, I'm missing something in the Grid usage. I don't get why, on the 3rd line, there is a blank space between the first input field and IIII. I'm looking for a way to remove this blanck space, i thought the grid would only occupy the required space by the label &amp; the input fields, but apparently some other blank spaces are added. I added the blue, yellow and orange background colors to have a better sight of what's happening. I was expecting the &quot;yellow&quot; block to end at the end of the &quot;orange&quot; block.</li>
  </ul>
  <p>Below you can find a screenshot of my result and the associated code
  Thanks for your help!</p>
  <p><a href="https://i.stack.imgur.com/vDLFm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vDLFm.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;Grid container direction={'column'} spacing={1}&gt;
      &lt;Grid container item style={{width:&quot;850px&quot;}} &gt;
          &lt;Grid container item xs={3} spacing={1}&gt;
              &lt;Grid item&gt;AAAAAAA&lt;/Grid&gt;
              &lt;Grid item xs={7}&gt;
                  &lt;Input 
                      inputProps={{ maxLength: 7, style: { textTransform: &quot;uppercase&quot; } }} 
                  /&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
          &lt;Grid justify='flex-end' container item xs={8} spacing={1} &gt;
              &lt;Grid item&gt;BBBB&lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  &lt;Input 
                      inputProps={{ maxLength: 1, style: { textTransform: &quot;uppercase&quot; } }} 
                  /&gt;
              &lt;/Grid&gt;
          
              &lt;Grid item&gt;CCCC&lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  &lt;Input 
                      inputProps={{ maxLength: 1, style: { textTransform: &quot;uppercase&quot; } }} 
                  /&gt;
              &lt;/Grid&gt;
              &lt;Grid item&gt;DDDD&lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  &lt;Input 
                      inputProps={{ maxLength: 1, style: { textTransform: &quot;uppercase&quot; } }} 
                  /&gt;
              &lt;/Grid&gt;
              &lt;Grid item&gt;EEEE/E&lt;/Grid&gt;
              &lt;Grid item item xs={2}&gt;
                  &lt;Input 
                      inputProps={{ maxLength: 4, style: { textTransform: &quot;uppercase&quot; } }} 
                  /&gt;
              &lt;/Grid&gt;
              &lt;Grid item&gt;/&lt;/Grid&gt;
              &lt;Grid item xs={1}&gt;
                  &lt;Input 
                      inputProps={{ maxLength: 1, style: { textTransform: &quot;uppercase&quot; } }} 
                  /&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
      &lt;Grid container item style={{width:&quot;850px&quot;}}&gt;
          &lt;Grid container item xs={6} spacing={1}&gt;
              &lt;Grid item&gt;FFF/FFF&lt;/Grid&gt;
              &lt;Grid item xs={9}&gt;
                  &lt;Input 
                      fullWidth=&quot;true&quot;
                      inputProps={{ maxLength: 21, style: { textTransform: &quot;uppercase&quot; } }} 
                  /&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
          &lt;Grid container item xs={6} spacing={1}&gt;
              &lt;Grid item&gt;GGGG&lt;/Grid&gt;
              &lt;Grid item xs={10}&gt;
                  &lt;Input 
                      fullWidth=&quot;true&quot;
                      inputProps={{maxLength: 21, style: { textTransform: &quot;uppercase&quot; } }} 
                  /&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
      &lt;Grid container item style={{border:&quot;1px solid red&quot;, width:&quot;1000px&quot;}}&gt;
          &lt;Grid container style={{backgroundColor: &quot;yellow&quot;}}spacing={1} xs={2}&gt;
              &lt;Grid item style={{backgroundColor: &quot;blue&quot;}}&gt;HHHH&lt;/Grid&gt;
              &lt;Grid item style={{backgroundColor: &quot;orange&quot;}}&gt;
                  &lt;Input 
                      fullWidth=&quot;true&quot;
                      inputProps={{ maxLength: 4, size: 4, style: { textTransform: &quot;uppercase&quot; } }} 
                  /&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
          &lt;Grid container spacing={1} xs={2}&gt;
              &lt;Grid item&gt;IIII&lt;/Grid&gt;
              &lt;Grid item&gt;
                  &lt;Input 
                      fullWidth=&quot;true&quot;
                      inputProps={{maxLength: 4, size: 4, style: { textTransform: &quot;uppercase&quot; } }} 
                  /&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  
  </code></pre>