SO equal height columns

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <div class="container">
<div class="row col-wrap">
<div class="col-md-4 col">
<p>left column </p>
<p>left column </p>
<p>left column </p>
</div><!-- end span 4-->
    
<div class="col-md-4 col">
<p>middle column</p>
</div><!--end span4-->
    
<div class="col-md-4 col">
<p>right column </p>
<p>right column </p>
<p>right column </p>
 <p>right column </p>
<p>right column </p>
</div><!-- end span 4-->

</div><!-- end row-fluid -->
    

</div>

CSS

.col{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#ffc;
}

.col-wrap{
    overflow: hidden; 
}