title: Chrome text element readjusting
body: <p>If you pay close attention in chrome to the flipped text in this example:</p>
  <p><a href="https://codesandbox.io/s/musing-flower-101kx" rel="nofollow noreferrer">https://codesandbox.io/s/musing-flower-101kx</a></p>
  <p>You can see that the text <code>Test</code> readjusts after you flip a card.</p>
  <p>Video: <a href="https://i.imgur.com/1Hb61dj.mp4" rel="nofollow noreferrer">https://i.imgur.com/1Hb61dj.mp4</a></p>
  <p>I believe it's something to do with the <code>Grid</code> because if you remove these lines it doesn't occur:</p>
  <pre class="lang-js prettyprint-override"><code>xs={6}
  sm={6}
  md={6}
  lg={6}
  </code></pre>
  <p>Does anyone know how to prevent it from readjusting, or the actual cause of it?</p>