title: Material-UI Grid Item height
body: <p>I have a row with multiple items and I want the height of all the items to equal the height of the tallest item, I basically want all the items to be the same height for this grid.</p>
  
  <pre><code>&lt;Grid container layout={'row'} spacing={8}&gt;
        &lt;Grid item className={classes.section} xs={12} sm={12} md={4} lg={4} xl={4}&gt;
          &lt;div className={classes.teamMemberName}&gt;
            {name}
          &lt;/div&gt;
        &lt;/Grid&gt;
  
        &lt;Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}&gt;
          &lt;FirstTimeFillRate fillRate={firstTimeFillRate} /&gt;
        &lt;/Grid&gt;
  
        &lt;Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}&gt;
          &lt;BackOrders
            backOrdersByItem={backOrdersByItem}
            backOrdersStoresWait={backOrdersStoresWait}
          /&gt;
        &lt;/Grid&gt;
  
        &lt;Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}&gt;
          &lt;OrderVolume orderVolume={orderVolume} /&gt;
        &lt;/Grid&gt;
  
        &lt;Grid item xs={12} sm={12} md={8} lg={8} xl={8} className={classes.section}&gt;
          &lt;Inventory inventory={inventory} /&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
  </code></pre>
  
  <p>The section class has a background color of gray and I can see that the sections do not inherit the height of the row as can be seen in this sandbox: <a href="https://codesandbox.io/s/1826lw51z3" rel="noreferrer">https://codesandbox.io/s/1826lw51z3</a></p>