title: CSS two column layout on hover increase width
body: <p>I want to have a row with 2 columns (both fluid), when I hover an element in one of the column, it will reveal content by horizontal slide, this should make the column wider and hence the other one less wide. Is this possible in pure CSS?</p>
  
  <pre><code>[ Left column fluid (elementX)][Right column fluid]
  </code></pre>
  
  <p>On mouse over of (elementX), we'll get something like this: </p>
  
  <pre><code>[ Left column fluid (elementXxxxxxx)][Right col...]
  </code></pre>
  
  <p>Here is an example that might illustrate it better: 
  <img src="https://i.stack.imgur.com/YWj1C.png" alt="enter image description here"></p>
  
  <p>Is this doable in pure CSS? If yes, how? </p>
  
  <p>Here is a Fiddle: <a href="http://jsfiddle.net/hvh29/3/" rel="nofollow noreferrer">http://jsfiddle.net/hvh29/3/</a></p>