title: How to properly use flex to align two components side by side (Material UI + ReactJS)?
body: <p>I am attempting to achieve side by side components of two cards ( <a href="http://www.material-ui.com/#/components/card" rel="nofollow noreferrer">http://www.material-ui.com/#/components/card</a> )and did so successfully. But when I expand the card, the following occurs:</p>
  
  <p><a href="https://i.stack.imgur.com/rYcTQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rYcTQ.png" alt="enter image description here"></a></p>
  
  <p>Card 1 is never manually clicked to be expanded, yet when Card 2 is expanded, Card 1 itself expands to the size of the expanded Card 2 even though Card 1 has never been clicked on for expansion. I looked around but can't seem to find the solution for the issue. Any suggestions or guidance would be greatly appreciated. Thank you in advance.</p>
  
  <p>Following is the snippet code for it:</p>
  
  <pre><code>       &lt;div style={{display:'flex'}}&gt;
            &lt;Card style={{ marginLeft: 30, marginRight: 30, flex:1}}&gt;
              &lt;CardHeader
                title="Card 1"
                subtitle="Updated 5/11"
                actAsExpander={true}
                showExpandableButton={true}
              /&gt;
              &lt;CardMedia 
                expandable={true} 
              &gt;
                &lt;img src="card1.PNG" /&gt;
              &lt;/CardMedia&gt;
  
              &lt;CardText expandable={true}&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
                Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
                Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
              &lt;/CardText&gt;
              &lt;CardActions expandable={true}&gt;
                &lt;FlatButton label="Action1" /&gt;
                &lt;FlatButton label="Action2" /&gt;
              &lt;/CardActions&gt;
            &lt;/Card&gt;
  
          &amp;nbsp;
  
            &lt;Card style={{ marginRight: 30, flex:1}}&gt;
              &lt;CardHeader
                title="Card 2"
                subtitle="Updated 5/11"
                actAsExpander={true}
                showExpandableButton={true}
              /&gt;
              &lt;CardMedia 
                expandable={true}
              &gt;
                &lt;img src="card2.PNG" /&gt;
              &lt;/CardMedia&gt;
              &lt;CardText expandable={true}&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
                Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
                Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
              &lt;/CardText&gt;
              &lt;CardActions expandable={true}&gt;
                &lt;FlatButton label="Action1" /&gt;
                &lt;FlatButton label="Action2" /&gt;
              &lt;/CardActions&gt;
            &lt;/Card&gt;
          &lt;/div&gt;
  </code></pre>