title: Hover to Expand One Div and Shrink Another In the Same Row
body: <p>I am working on a web site where there are 2 divs per row, each at 45%.  I would like to set it so that if you hover over a DIV in a row, the other DIV in that row will shrink as the hovered DIV expands, and then they restore when hover leaves.  The shrinking DIV could be either before or after the hovered DIV in the row, and that's where I am stuck.  </p>
  
  <p>THe HTML would be the below, repeated over and over:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="cell upcoming"&gt;
          &lt;img src="stills/press/press-logo-gdc2013.jpg" class="general"&gt;&lt;p class="one"&gt;Panelist - Game Developers Conference 2013&lt;/p&gt;
          &lt;p class="two"&gt;[Panel Name TBD]&lt;/p&gt;
          &lt;p class="three"&gt;&lt;b&gt;Panel Date/Location:&lt;/b&gt; [TBD] on March 25-29, 2013 at GDC (San Francisco, California)&lt;/p&gt;
          &lt;p class="three"&gt;&lt;b&gt;Panelists:&lt;/b&gt; [TBD]&lt;/p&gt;
          &lt;p class="three"&gt;&lt;b&gt;Panel Blurb:&lt;/b&gt; [TBD]&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="cell upcoming"&gt;
          &lt;img src="stills/press/press-logo-wizard-world-st-louis.jpg" class="general"&gt;&lt;p class="one"&gt;Panelist - Wizard World St. Louis 2013&lt;/p&gt;
          &lt;p class="two"&gt;[Panel Name TBD]&lt;/p&gt;
          &lt;p class="three"&gt;&lt;b&gt;Panel Date/Location:&lt;/b&gt; [TBD] on March 22-24, 2013 at Wizard World (St. Louis, Missouri)&lt;/p&gt;
          &lt;p class="three"&gt;&lt;b&gt;Panelists:&lt;/b&gt; [TBD]&lt;/p&gt;
          &lt;p class="three"&gt;&lt;b&gt;Panel Blurb:&lt;/b&gt; [TBD]&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There is no CSS for "row" but the CSS for "cell" is </p>
  
  <pre><code>div.cell { position:relative; margin:2px; float:left; width:45%; text-align:justify; vertical-align:top; border:2px solid; padding:10px; border-radius:25px; -moz-border-radius:25px; }
  </code></pre>
  
  <p>and the partial JQUERY is this:</p>
  
  <pre><code> $('.cell')
      .on('mouseenter', function(){
          $(this).animate ({width:"75%"},"slow);
      })
      .on('mouseleave', function(){
          $(this).animate ({width:"45%"},"slow);
      });
  </code></pre>
  
  <p>Of course, I would like the other "cell" in the "row" (be it the left or right) to shrink AS the other is growing, but I don't know how to determine the identifier of "other DIV in that row" or to get 2 things to animate simultaneously.</p>
  
  <p>Help is appreciated!</p>