JSFiddle - React, Tailwind, and code Playground

HTML

<div class="middle_row_box">
<ul id="middle_row_contents">
    <li>
        <div class="hours_rooms_used">
            <div><h3>Meeting hours per room</h3><select id="years_rooms_used"></select></div>
            <div class="tab_rooms_used"><canvas id="chart_rooms_used"></canvas></div>
        </div>
    </li>
    <li>
        <div class="hours_per_customer">
            <div><h3>Meeting hours per customer</h3><select id="years_rooms_customer"></select></div>
            <div class="tab_rooms_customer"><canvas id="chart_per_customer"></canvas></div>
        </div>
    </li>
</ul>
</div>

CSS

#middle_row_contents {margin: 0; padding: 0;}

#middle_row_contents li {
    display: inline-block;
    list-style-type: none;
    padding-right: 2%;
    *display: inline;
    width: 47%;
    background: red;
}