title: Make div responsive and control text alignment
body: <p>I have the following layout (Parent div, two child divs)</p>
  
  <p>wanted to make this layout responsive for browser's width, so anytime the user changes the browser's width this layout should occupies the same area of screen</p>
  
  <p>also, I wanted to middle-text the content, I've tried <code>vertical-align: middle;</code>, <code>display: table-cell;</code></p>
  
  <p>any suggestions?</p>
  
  <p><a href="http://jsfiddle.net/BKtx5/" rel="nofollow noreferrer">Markup here</a></p>
  
  <p><img src="https://i.stack.imgur.com/xnJz5.png" alt="enter image description here"></p>