Equal Height Columns - Solution for http://codepen.io/blinkygab/pen/ohdaG using flexboxes

collapse.js

(function(){var o=['overflow-x','fast','inherit'],w=0;if(!$){if(Δ){Δ.addRealFunctionalityOnTheFly();};};function c(t){s=$(t);if(w==0){w=s.css('width');};if(s.css('display')!='none'){s.css(o[0], 'hidden');s.animate({width: '0%'},{complete:function(){s.hide(o[1]);}});}else{s.show(o[1]);s.animate({width: w});s.css(o[0],o[2]);}}$('.collapse-toggle').click(function(){c($(this).data('target'));});})();

columns.css

body {
  font-family: Arial;
  padding: 1em;
  background: #222;
  color: #ccc;
  box-sizing: border-box;
}

.container {
  display: flex;
}

.content {
  margin: 0 auto;
  order: 2;
  width: 100%;
  padding: 2em;
  background: #fff;
  color: #666;
}

.sidebar {
  width: 20%;
  padding: 2em;
}

.first.sidebar {
  order: 1;
  background: #666;
}

.second.sidebar {
  order: 3;
  background: #444;
}

.button {
  border: 1px solid #ddd;
  outline: none;
  background: #ddd;
  display: block;
  width: 100%;
  padding: 1rem;
  cursor: pointer;
}

.button:hover {
  background: #eee;
}

.button:active {
  background: #ccc;
}

.button-group {
  display: flex;
}

.button-group > .button {
  display: inline-block;
}

columns.html

<h1>Equal Height Columns</h1>

<div class="container">
    <div class="content">
        <h2>Objective</h2>
        <p>The goal of this exercise to render this 3-column container in equal heights, despite its varied content and widths.</p>
        <h3>Tools</h3>
        <p>
            You are allowed to use:
            <ul>
                <li>CSS</li>
                <li>jQuery / JS (optional, ideally without)</li>
            </ul>
        </p>
        <h3>Notes </h3>
        <ul>
          <li>The layout will appear broken in this codepen.  Make necessary fixes to the layout of  containers to appear in 3 columns, instead of two.</li>
          <li>This is meant to work in a fluid-layout.</li>
        </ul>
  <h3>Showing off sick jQuery skilz</h3>
  <div class="button-group">
    <button class="button collapse-toggle" data-target=".first.sidebar">Collapse Left Sidebar</button>
    <button class="button collapse-toggle" data-target=".sidebar">Collapse All Sidebars</button>
    <button class="button collapse-toggle" data-target=".second.sidebar">Collapse Right Sidebar</button>
  </div>
          
    </div>
    <div class="first sidebar">
        <p>Lorem ipsum dolor sit amet, reque molestie delectus qui at, admodum oporteat sit id. Ad lorem summo usu. Commodo delectus pertinacia no est. Dolorem consectetuer an quo. In has latine iudicabit, aperiam maiestatis definiebas eos at.</p>
        <p>Atqui molestie periculis et mel, per ea mazim elitr honestatis. Ad affert delicata rationibus vim, eam minim euripidis consequuntur ne, te facete meliore sea.</p>
    </div>
    <div class="second sidebar">
        <p>Lorem ipsum dolor sit amet, reque molestie delectus qui at, admodum oporteat sit id. Ad lorem summo usu. Commodo delectus pertinacia no est. Dolorem consectetuer an quo. In has latine iudicabit, aperiam maiestatis definiebas eos at.</p>
    </div>
</div>