jQuery expandable grid (2 columns)
<p>I have a grid =></p>

<p><img src="http://i.stack.imgur.com/QL7tL.png" alt="enter image description here"></p>

<p>The idea is for the user to click on the boxes, and they would expand with some extra content.</p>

<p>Now, it all works great when you click on the boxes in the left column, but if you click on one of the boxes in the right column - here's what happens (click on the yellow box) =></p>

<p><img src="http://i.stack.imgur.com/B6eyq.png" alt="enter image description here"></p>

<p>Basically, I'm trying to fix the holes and keep the elements in their initial order.</p>

<p>Here's what I expect should happen when I click on the yellow box (simulated image) =></p>

<p><img src="http://i.stack.imgur.com/6isoi.png" alt="enter image description here"></p>

<p>Is there maybe a plugin I could use?</p>

<p>and here's the jsfiddle link => <a href="http://goo.gl/UMl3A" rel="nofollow">here</a></p>

<p>Thanks!</p>
