JSFiddle - React, Tailwind, and code Playground

by amol jawale

HTML

<div class="parent">
            <div class="title">Title</div>
            <div class="child">Content</div>
        </div>

CSS

html, body{
    margin: 0;
    height: 100%;
}
body{
    background: blue;  
}
.title{
    margin-bottom: 25px;
    background: yellow;
}
.parent{
    height: 100%; 
    background: red;
    box-sizing: border-box;
}
.child{
    height: auto;
    background: green;
    box-sizing: border-box;
}

JavaScript

var _init = function() {
parentHeight = $('.parent').outerHeight(true);
titleHeight = $('.title').outerHeight(true);
childHeight = parentHeight - titleHeight;     
$('.child').height(childHeight);
}
$(document).ready(function() {  
    _init();
})                
$(window).resize(function() {
        _init();
    });