JSFiddle - React, Tailwind, and code Playground

by Alex Str

HTML

<body>
    <div id="wraper">
        <div id="header"></div>
        <div id="sidebarL"></div>
        <div id="sidebarR"></div>
        <div id="content">
            <div id="a">
                <div class="tablica">
                    <div class="yacheika">Блок 1</div>
                    <div class="yacheika">Блок 2</div>
                    <div class="yacheika">Блок 3</div>
                </div>
                <div class="tablica">
                    <div class="yacheika">Блок 4</div>
                    <div class="yacheika">Блок 5</div>
                    <div class="yacheika">Блок 6</div>
                </div>
                <div class="tablica">
                    <div class="yacheika">Блок 7</div>
                    <div class="yacheika">Блок 8</div>
                    <div class="yacheika">Блок 9</div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">5555</div>
    
    <body>

CSS

#wraper {
    outline:1px solid #cccccc;
    margin:0 auto;
}
#header {
    height:77px;
    background-color:#FF00AE;
    border:1px solid #cccccc;
    position:relative;
    clear: both;
    overflow: hidden;
}
#sidebarL {
    /*height:77px;*/
    width:200px;
    background-color:#D0FF00;
    border:1px solid #cccccc;
    float:left;
}
#sidebarR {
    /*height:77px;*/
    width:200px;
    background-color:#3AE2CE;
    outline:1px solid #cccccc;
    float:right;
}
#content {
    /*height:200px;*/
    background-color:#DB0800;
    border:1px solid #cccccc;
    margin-left:200px;
    margin-right:200px;
}
.tablica {
    display: table;
    width: 100%;
    height:33.33%;
    
}
.yacheika {
    display: table-cell;
    table-layout: fixed;
    outline:1px solid #cccccc;
    font:12px ssans-serif;
    text-align:center;
}
#footer {
    height:20px;
    background-color:#AB4533;
    outline:1px solid #cccccc;
}

JavaScript

$(document).ready(function () {
    function setEqualHeight(columns) {
        var tallestcolumn = 0;
        columns.each(

        function () {
            currentHeight = $(this).height();
            if (currentHeight > tallestcolumn) {
                tallestcolumn = currentHeight;
            }
        });
        columns.height(tallestcolumn);
    }
    setEqualHeight($("#sidebarL,#sidebarR,#content"));
});