JSFiddle - React, Tailwind, and code Playground

by Bhabani Raju

HTML

<div class="wrapper">
    <div class="box left">
         <p>Left</p>
         <p>Left</p>
         <p>Left</p>
         <p>Left</p>
         <p>Left</p>           
    </div>
    <div class="separator"></div>
    <div class="box right">
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
    </div> 
</div>
<div class="footer">a
</div>

CSS

.wrapper{
   
    display:table;
}
.box{display:table-cell;}
.left{
    border:10px solid #0188ed;
    margin-right:10px;
    background: #0150e1;
    width: 180px;   
}
.right{
    width:270px;
    border:10px solid #0188ed;
    background: #0150e1;
}
.footer{
    background:#0181ec;
    height: 50px;
    width: 500px;
    border-top: 10px solid #ffffff;
}