JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="header_wrapper">Header</div>
    <div id="content_wrapper" class="clearfix">
        <div id="div_1">Div 1</div>
        <div id="div_2">
            <ul>
                <li>Object 1</li>
                <li>Object 2</li>
                <li>Object 3</li>
                <li>Object 4</li>
            </ul>
        </div>
    </div>
</body>

CSS

body {
    font-size:10px;
}
/* wrappers */
 #header_wrapper {
    width:95%;
    height:40px;
    margin:auto;
    margin-top:5px;
    padding:2px;
    border:1px solid red;
}
#content_wrapper {
    display: table;
    width:95%;
    margin:auto;
    margin-top:5px;
    padding:2px;
    border:1px solid red;
}
/* div1 */
 #div_1 {
    display: table-cell;
    width:70%;
    border:1px solid purple;
}
/* div 2 */
 #div_2 {
    display: table-cell;
    width:25%;
    border:1px solid purple;
}
#div_2 ul {
    list-style-type:none;
}
#div_2 li {
    width:100px;
    height:30px;
    margin:2px;
    padding:1px;
    border:1px solid darkgrey;
}