JSFiddle - React, Tailwind, and code Playground

by ttamminen

HTML

<html>
    <div id="container">
        <div id="statistics-wrapper">
            <div id="statistics-list" class="border">
                Ossin tilastolista
            </div>
            <div id="statistics-content" class="border">
                <div class="border" id="statistics-grid-container">
                    <span>Grid</span>
                </div>
                <div class="border" id="statistics-chart-container">
                    <span>Graph</span>
                </div>
            </div>            
        </div>
    </div>
</html>

CSS

#container
{
    width: 100%;
    height: 100%;
}

#statistics-content, #statistics-list
{
    /* yhteiset asetukset */
    width: 48%;
}

#statistics-content
{
    float: right;
}

#statistics-list
{
    float: left;
}

.border
{
    border: 1px solid black;
}

#statistics-grid-container, #statistics-chart-container
{
    width: 100%;
    height: 40%;
}