title: How can I push surrounding elements off screen when enlarging one?
body: <p>I am trying to make a group of elements in two columns, when you click on one it should expand and push all of the other ones out of the way. Like going from A to B.</p>
  
  <p><strong>A</strong> <img src="https://i.stack.imgur.com/scPQJ.png" alt="enter image description here">  <strong>B</strong> <img src="https://i.stack.imgur.com/l2rir.png" alt="enter image description here"></p>
  
  <p>I have explicitly created two columns then filled them. When you click on an element in the left column, it expands, which pushes the stuff below it down, and the column on the right is supposed to move more right so that it is partially hidden off screen. The problems are that the elements above aren't pushed up, and the right column, is pushed below the left column, and then pushed right. 
  You can see the results here <a href="http://jsfiddle.net/easilyBaffled/RJ8Q3/" rel="nofollow noreferrer">JSFiddle</a>. </p>
  
  <p>It is strange because the right column starts moving right a bit, then moves down, and then finishes moving right. If I don't explicitly set the right column to <code>left: 270px;</code> it will just be pushed below. I have tried to lock it's y position by setting <code>top: 5px;</code> but it keeps getting forced down. How can I make the elements move as I want them to?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;span class="col left"&gt;
          &lt;div class="elem"&gt;x&lt;/div&gt;
          &lt;div class="elem"&gt;x&lt;/div&gt;
          &lt;div class="elem"&gt;x&lt;/div&gt;
      &lt;/span&gt;
      &lt;span class="col right"&gt;
          &lt;div class="elem"&gt;x&lt;/div&gt;
          &lt;div class="elem"&gt;x&lt;/div&gt;
          &lt;div class="elem"&gt;x&lt;/div&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container {
      position: absolute;
      background-color: red;
      height: 400px;
      width: 330px;
      overflow: hidden;
  }
  
  .elem {
      height: 60px;
      width: 150px;
      background-color: yellow;
      margin: 5px 5px;
      position: relative;
      transition: all 2s ease;    
  }
  .col{
      position: relative;
      display: inline-block;
      transition: all 2s ease;
  }
  .expand {
      height: 100px;
      width: 200px;
      margin: 10px 10px;
  }
  .push{
      left: 270px;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code> $(".elem").click(function () {
          $(this).addClass("expand");
          $(".right").addClass("push");
      });
  </code></pre>