Bootstrap sub column heights not the same

Question

I have a problem making all the heights of my columns the same. I use Bootstrap the size them, but I use sub divs which is where my problem comes in.

Here is a DEMO of my problem

The first "table" is one from an example taken from a Stackoverflow Question

The second one is my example. I need the inned cells to be of the same height as the max row height.

Any ideas please

Here is a preview of the layouts.

Answer 1

Add this in your css, and you will get the result , https://www.bootply.com/ffG102jhjs

.row.equal .col-sm-3 > div {
 height: 100%;
}