title: Using 'table' and 'table-cell' with display property in responsive design?
body: <p><img src="https://i.stack.imgur.com/Jafap.png" alt="Using table and table-cell"></p>
  
  <p>I am using <code>display: table;</code> on the container and <code>display: table-cell;</code> on the child elements, to highlight some posts horizontally on a page.</p>
  
  <p>The thing is, I have no idea as to how to make them responsive, i.e. as the screen-size becomes smaller, each child (i.e. <code>table-cell</code>) should become proportionately smaller, whilst continuing to stay aligned horizontally.</p>
  
  <p>How do I do this?</p>
  
  <ul>
  <li>Example Code: <a href="http://www.codepen.io/anon/pen/dCLgq" rel="nofollow noreferrer">http://www.codepen.io/anon/pen/dCLgq</a></li>
  <li>Demo: <a href="http://codepen.io/anon/full/dCLgq" rel="nofollow noreferrer">http://codepen.io/anon/full/dCLgq</a></li>
  </ul>