JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
                    <div id="id">
                        <ul>
							<li><a href="">1</a></li>
							<li><a href="">2</a></li>
							<li><a href="">3</a></li>
						</ul>
                    </div>
						
                    <div id="id">
						<ul>
							<li><a href="">1</a></li>
							<li><a href="">2</a></li>
							<li><a href="">3</a></li>
							<li><a href="">4</a></li>
						</ul>
                    </div>
						
						<ul>
							<li><a href="">1</a></li>
							<li><a href="">2</a></li>
						</ul>
						
						<ul>
							<li><a href="">1</a></li>
						</ul>
</div>

CSS

ul{
    float:left;
    border-right:red solid 3px;  
}

#id {
    border-right:green solid 3px;
    top: 0;
    bottom: 0;
    height: 100%;
}
li{
    list-style:none;
    padding:10px;
}
div{
    background:grey;
    float:left;
}

}