title: React Masonry items alignment issue
body: <p>I am using react masonry library: 
  <a href="https://www.npmjs.com/package/react-masonry-component" rel="nofollow noreferrer">https://www.npmjs.com/package/react-masonry-component</a>
  I have added three items with different width/height:
  <a href="https://imgur.com/cmbBlbU" rel="nofollow noreferrer">image</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import Masonry from 'react-masonry-component';
  
  const gridItems = [
      { width:"200px",height: "200px"},
      { width:"100px",height: "100px"},
      { width:"100px",height: "100px"}
  ].map((i, index) =&gt; {
  
      return &lt;div className={`grid-item`} style={{width: i.width, height: i.height}}&gt;
          &lt;div style={{backgroundColor: 'green', height: '100%'}}&gt;{index}&lt;/div&gt;
      &lt;/div&gt;;
  })
  
  const gridView = (props) =&gt; {
  
      return &lt;div className=""&gt;
          &lt;Masonry
              className={'masonry-view'}
             &gt;
              {gridItems}
          &lt;/Masonry&gt;
      &lt;/div&gt;;
  }
  
  export default gridView;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Issue is visible on attached image - third item is not aligned correctly.
  Does anyone know solution?</p>