JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"   ></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div class="container-fluid text-center">
    <div class="row justify-content-center">
        <div class="row content">
            <div class="col-sm-2 sidenav">
                <div class="leftcontainer">
                    <div class="banner"> Get Client Banner </div>
                    <div class="banner"> Guides Banner </div>
                    <h5> Event Schedule </h5>
                    <div class="eventinfo">
                        <div class="split"><span><strong>Bl</strong></span></div>
                        <div class="split"><span>0 D 0</span></div>
                    </div>
                    <div class="eventinfo">
                        <div class="split"><span><strong>Bl</strong></span></div>
                        <div class="split"><span>0 D 0</span></div>
                    </div>
                    <div class="eventinfo">
                        <div class="split"><span><strong>Bl</strong></span></div>
                        <div class="split"><span>0 D 0 H</span></div>
                    </div>
                    <div class="eventinfo">
                        <div class="split"><span><strong>Bl</strong></span></div>
                        <div class="split"><span>0 D 0 Hr</span></div>
                    </div>
                    <div class="eventinfo">
                        <div class="split"><span><strong>Bl</strong></span></div>
                        <div class="split"><span>0 D 0 Hr n</span></div>
                    </div>
                    <div class="eventinfo">
                        <div class="split"><span><strong>B</strong></span></div>
                        <div class="split"><span>0 D 0 </span></div>
                ...

CSS

html, body { height: 100%;}


/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content { height: 100%; width:70%; margin: auto;  display: flex; }

/* Set gray background color and 100% height */
.sidenav { padding-top: 20px;background-color: #f1f1f1; flex: 1}


/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
    .sidenav {
        height: auto;
        padding: 15px;
    }
    .row.content {height:auto; display: block;}
}



h5  { font-size: 14px; border-bottom: 6px solid red; font-weight: bold; }


.rightcontainer {   width:100%; height:100% margin: auto; border: 0px solid; border-radius: 4px; margin-bottom: 5px; border-bottom: 6px solid red;}

.rightcontainer .accountpanel .columncontainer .col-sm-6 { padding-right: 0px; padding-left: 0px;}

.leftcontainer {width:100%; margin: auto;  margin-bottom: 5px; border-bottom: 6px solid red; }
.leftcontainer .eventinfo {width:100%; height: 38px; margin-bottom: 5px; border: 1px solid gray; }
.leftcontainer .eventinfo .split { height: 17px; }
.leftcontainer .eventinfo .split span { font-size: 12px; }
.leftcontainer .banner {width: 100%; height: 75px; border: 1px solid gray; margin-bottom: 5px; }