JSFiddle - React, Tailwind, and code Playground

by Yonatan Quintero

HTML

<div class="container" id="left">
    <div class="a">A 1</div>
    <div class="a">A 2</div>
    <div class="a">A 3</div>
    <div class="a">A 4</div>
 </div>
<div class="container" id="right">
    <div class="b">B 1</div>
    <div class="b">B 2</div>
    <div class="b">B 3</div>
    <div class="b">B 4</div>
    <div class="b">B 5</div>
 </div>

CSS

body {
    margin:0;     /* This is used to reset any browser-default margins */
    height:100vh; /* This is needed to overcome a Chrome bug. */
    width:100vw;  /* As above. */
}

.container{
   height:100vh; 
    width:50vw;
    margin:0;
}
.a{
    height:25vh;
    border:1px solid gray;
}

.b{
    height:20vh;
    border:1px solid white;
}

#left {
    background:#5ae;
    float:left;
}

#right {
    background:#ea5;
    float:right;
}