JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/colors/3.0.0/css/colors.css">
<header></header>
<div class="main bg-navy">
    <div class="container-fluid bg-olive">
        <div class="row">
            <div class="col-md-3 bg-purple left">
                .left
            </div>
            <div class="col-md-9 bg-fuchsia right">
                .right
            </div>
        </div>
    </div>
</div>
<footer class="bg-orange py-3 text-center">
    <p class="white my-0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
</footer>

CSS

body {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     height: 100vh;
}
 .main {
     display: -ms-flexbox;
     display: flex;
     -ms-flex: 1 0 auto;
     flex: 1 0 auto;
}
 header, footer {
     -ms-flex-negative: 0;
     flex-shrink: 0;
}

.main > .container,
.main > .container-fluid {
     display: -ms-flexbox;
     display: flex;
     flex-grow: 1
}

.main > .container > .row,
.main > .container-fluid > .row {
    flex-grow: 1
}