title: How to stack elements (cards) horizontally in a row within a parent element (div)
body: <p>I have a question very similar <a href="https://stackoverflow.com/questions/35995511/reactjs-align-material-ui-elements-horizontally/42725686">to this one</a>.</p>
  
  <p>I have forked the Material UI Card example from <a href="https://material-ui.com/demos/cards/" rel="nofollow noreferrer">https://material-ui.com/demos/cards/</a>. The link <a href="https://codesandbox.io/s/9j18zzn25y" rel="nofollow noreferrer">to the sandbox editor is here</a>.</p>
  
  <p>Basically I need to stack Material UI cards horizontally in one row within a parent div and when they do not fit they would create another row bellow the previous.</p>
  
  <p>So when i write:</p>
  
  <pre><code>render(
      &lt;div className="row"&gt;
        &lt;Demo /&gt; &lt;Demo /&gt;
      &lt;/div&gt;,
      rootElement
    );
  </code></pre>
  
  <p>I expect to get the two cards besides one another.</p>
  
  <p>I have added following styles with <code>display: "inline-block"</code>, but the cards still stack vertically:</p>
  
  <pre><code>const styles = {
    card: {
      minWidth: 275,
      display: "inline-block"
    }
  };
  </code></pre>