JSFiddle - React, Tailwind, and code Playground

by Maxim Gladkov

HTML

<div class="widget widget-chart">
        <div class="widget-header">
            <div class="widget-content">
                <h5>Socioeconomic: Middle Class and Performance: High</h5>
            </div>
        </div>
        <div class="widget-body">
            <div class="widget-content">
                <img src="http://www.mathgoodies.com/lessons/graphs/images/line_example1.jpg" />
            </div>
        </div>
        <div class="widget-footer">
            <div class="widget-content">
                <p>This is some footer content.</p>
            </div>
        </div>
    </div>

CSS

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    .widget {
        display: table;
        width: 100%;
        height: 100%;
    }
    
    .widget-header, .widget-body, .widget-footer {
        display: table-row;
    }
    
    .widget-content {
        display: table-cell;
        border: 1px solid red;
    }
    
    .widget-header, .widget-footer {
        height: 40px;
    }