title: How can I make a half-half layout with some text using display: flex?
body: <p>I want to make a half-half layout. So I made a <code>&lt;div&gt;</code> that had <code>display: flex;</code> and put two children that had <code>flex-grow: 1;</code>. It looked like what I expected, a half-half layout. But when I put something in one of the children, it got larger than the other.</p>
  
  <p>I can’t quite grasp why it works this way.
  <a href="http://codepen.io/anon/pen/rOvpPM" rel="nofollow noreferrer">http://codepen.io/anon/pen/rOvpPM</a></p>
  
  <p>Could you please tell me the why and the proper CSS for it?</p>