JSFiddle - React, Tailwind, and code Playground

by iamvdo

HTML

<div id="wrapper">
    <div id="content">
        Content
    </div>
    <div id="sidebar">
        <div class="table">
            <div class="table-row">
                <div id="sidebar-header">
                    Sidebar header
                    <ul>
                        <li>semi-transparent background</li>
                        <li>height may vary</li>
                    </ul>
                </div>
            </div>
            <div class="table-row">
                <div id="sidebar-content">
                    Sidebar content
                </div>
            </div>
        </div>
    </div>
</div>

CSS

*{
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
body {
    font: 20px/1 sans-serif;
    background: green;
}
#wrapper{
    display: table;
    table-layout:fixed;
    width:550px;
    /* change hauteur ici */
    height:350px;
}
#content,#sidebar{
    display:table-cell;
    vertical-align: top;
    height:100%;
    }
#content {
    width: 300px;
    padding: 20px;
    background: #fff;
}
#sidebar {
    width: 250px;
}
#sidebar .table{
    display:table;
    table-layout: fixed;
    width:100%;
    height:100%;
}
#sidebar .table-row{
    display: table-row;
}
#sidebar-header {
    display:table-cell;
    
    padding:20px;
    color: #fff;
    background-color: transparent;
    background-color: rgba(0, 0, 0, 0.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
    zoom: 1;
}
#sidebar-content {
    background: #ccc;
    display:table-cell;
    padding:20px;
}
ul {
    list-style-type: disc;
    font-size: .8em;
    padding: .5em 0;
}