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;
    height: 100%;  
    width: 100%;   
}
#wrapper li {
    width: 120px;
    height: 50px;
    padding-top: 15px;
    height: 100%;   
}
.row div {
    height: 200px;
    width: 33%;
}
#col1 {
}
#col2{
    border-left: dotted 2px grey;
}
#col3 {
    border-left: dotted 2px grey; 
}