title: Organize container content by container height
body: <p>I have a site that has 2 containers that each have a bunch of content that is related. The organization of what content goes in what container is important, but not as important as the containers being as close as possible in height.</p>
  <h1>Code:</h1>
  <pre><code>&lt;button&gt;Click to add more boxes&lt;/button&gt;
  &lt;div id=&quot;wrapper&quot; align=&quot;center&quot;&gt;
      &lt;div id=&quot;container1&quot;&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id=&quot;container2&quot;&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <hr />
  <h1><a href="http://jsfiddle.net/ULxnj/2/" rel="nofollow noreferrer">Jsfiddle</a></h1>
  <hr />
  <h1>Question:</h1>
  <p>You will see after adding more items, only sometimes will one container have significantly more content than the other, but it does happen.</p>
  <p>When that happens I would like to take the left over items in the larger container, and distribute them to the containers in a way that would make the heights of each container as close as possible to eachother.</p>
  <p>How could I go about doing that?</p>