I have three columns under two different parent divs. I need to set equal height for these three columns. 

The issues in my case are:

1. 3 columns are under different parent divs, cannot use **display: table** and **table-cell** method
2. Got a tab-list in col-2, which will alter the block height when you click on different tabs
3. I tried JS to set the equal height, but failed:

a) JS got the wrong height for col-2, cause it calculates the total height for all sections but not the one that is active.

b) JS sets a fixed height value. When I shrink the window size or click on different tabs in col-2, the column height won't adjust accordingly. The content inside col may overflow.

**HTML code:**

```
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div>
  <div class="left-wraper">
    <header>Head1</header>
    <div class="col-1">
      <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
    </div>
    <div class="col-2">
      <header>Topic 2</header>
      <ul class="list-inline">
        <li><a href="#menu1">Menu 1</a></li>
        <li><a href="#menu2">Menu 2</a></li>
        <li><a href="#menu3">Menu 3</a></li>
      </ul>
      <section id="menu1" role="tabpanel">
        <p>
          This is menu1<br> This is menu1<br> This is menu1<br> 
        </p>
      </section>
    </div>
  </div>
  <div class="right-wraper">
    <span>Head2</span>
    <div class="col-3">
      <header>Topic 2</header>
      <p>
        sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text
      </p>
    </div>
  </div>
</div>

```

**CSS code:**

```
.left-wraper {
  width: 65%;
  float: left;
  padding: 8px;
  background-color: #b3ffcb;
}

.right-wraper {
  width: 28%;
  float: left;
  padding: 8px;
  margin-left: 8px;
  background-color: #ffccef;
}

.col-1 {
  width: 30%;
  float: left;
  background-color: #e6ccfe;
}

.col-2 {
  width: 70%;
  float: left;
  background-color: #ffeecd;
}

.col-3 {
  width: 100%;
  float: left;
  background-color: #b3d9ef;
}

```

[JSFiddle Demo](http://jsfiddle.net/56chL/101)

Need a way to dynamically set equal height for block purple, yellow and blue in the above demo. Not just on load, but also when click on different tabs or resize the screen.