title: Material-ui: using <Divider> breaks the grid
body: <p>so I have this annoying issue I can't find a result for.
  I'm new to material-ui and it feels like I'm missing something here...</p>
  <p>I just want a divider between the grid items, without it breaking the order of the grid. What am I missing?</p>
  <p>Sandbox: <a href="https://vpbyd.csb.app/" rel="noreferrer">https://vpbyd.csb.app/</a></p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import {Grid, Typography, Divider} from '@material-ui/core'
  
  export default function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
         &lt;Grid container spacing={3}&gt;
  
  &lt;Grid item xs={4}&gt; 
  &lt;Typography variant=&quot;h5&quot; component=&quot;h2&quot;&gt;
  One
  &lt;/Typography&gt;
  &lt;/Grid&gt;
  &lt;Grid item xs={4}&gt; 
  &lt;Typography variant=&quot;h5&quot; component=&quot;h2&quot;&gt;
    Two
    &lt;/Typography&gt;
  &lt;/Grid&gt;
  &lt;Grid item xs={4}&gt; 
  &lt;Typography variant=&quot;h5&quot; component=&quot;h2&quot;&gt;
    Three
    &lt;/Typography&gt;
  &lt;/Grid&gt;
  
  &lt;/Grid&gt;
  
  &lt;Grid container spacing={0} alignItems=&quot;center&quot;&gt;
  
  &lt;Grid item xs={4}&gt; 
  &lt;Typography variant=&quot;h6&quot; component=&quot;h2&quot;&gt;
  first value
  &lt;/Typography&gt;
  &lt;/Grid&gt;
  &lt;Divider orientation=&quot;vertical&quot; flexItem/&gt;
  &lt;Grid item xs={4}&gt; 
  &lt;Typography variant=&quot;h6&quot; component=&quot;h2&quot;&gt;
  second value
  &lt;/Typography&gt;
  &lt;/Grid&gt;
  &lt;Divider orientation=&quot;vertical&quot; flexItem/&gt;
  &lt;Grid item xs={4}&gt; 
  &lt;Typography variant=&quot;h6&quot; component=&quot;h2&quot;&gt;
  third value
  &lt;/Typography&gt;
  &lt;/Grid&gt;
  
  &lt;/Grid&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>