title: How to stop inner div to overlap outer div?
body: <p>when i click the large button, the <code>smaller</code> div increases width to 300px. And the red line shows above the black dotted borders. </p>
  
  <p>Is there a way that when I click, the black dotted border remains front, and red border on back?  Here is fiddle</p>
  
  <p><a href="http://jsfiddle.net/K4L5s/" rel="nofollow">http://jsfiddle.net/K4L5s/</a></p>
  
  <p>Thanks</p>