JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
     <div id='wrapper'>
         <div class="row">
            <div id='col1' class="col-xs-4">
                <ul>
                    <li>
                        <a href=''>col-1</a>
                    </li>

                </ul>
            </div>

            <div id='col2' class="col-xs-4">
                <ul>
                    <li>
                        <a href=''>col -2</a>
                    </li>
                </ul>
            </div>

            <div id='col3' class="col-xs-4">
                <ul>
                    <li>
                        row 1
                    </li>
                    <li>
                        row 2
                    </li>
                    <li>
                        row 3
                    </li>
                    <li>
                        row 4
                    </li>
                </ul>
            </div>
         </div>
        </div>

CSS

#wrapper {
    background-color: yellow;
    top: 88px;
    left: 55px;

}
.row{ display:table-row; 
    height:100%;}

#wrapper li{
    width: 120px;
    height: 50px;
    padding-top: 15px;
}

#col1{
    height:100%;
    display: table-cell;
}


#col2{
    border-left: dotted 2px grey;
    height: 100%;   
}


#col3{
    border-left: dotted 2px grey; 
}

.col-xs-4 {  display: table-cell;
    float: none; }