title: CSS Animate Div Width from Left to Right
body: <p>I'm trying to animate the width of two overlapping divs, in order to show / hide the text contained within them. I'd like one div to animate from left to right, and the other to animate from right to left, so that as one piece of text is being wiped away, the other is being revealed following it.</p>
  
  <p>Here's a JS fiddle of what I've got so far, but they are both being revealed from left to right. How do I get 'cancel' to be revealed from right to left?</p>
  
  <p><a href="https://jsfiddle.net/a43wrq20/" rel="nofollow">https://jsfiddle.net/a43wrq20/</a></p>
  
  <p>I thought that these rules would do it, but it isn't working for me:</p>
  
  <pre><code>.foo {
      right: 0;
      width: 0;
  }
  
  .foo.active{
      right: 0;
      width: 120px;
  }
  </code></pre>
  
  <p>Also, they both shift slightly as they're animating? Can anyone see an easy fix for this? </p>
  
  <p>Thanks a lot!</p>