JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fullwidth">
            <div class="available">10</div>
            <div class="notavailable">10</div>
        </div>
        <hr>
        <table>
            <tr>
                <td style="background-color: green; width: 50px; text-align: center;">10</td>
                <td style="background-color: blue; width: 50px; text-align: center;">10</td>
        </table>

CSS

br.clear {
                float: clear;
            }

            div.fullwidth {
                /*border: 1px solid black; */
                height: 20px;
                max-width: 100px;
            }
            div.available {
                background-color: #22BB22;
                color: #111111;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                width:49%

            }
            div.notavailable {
                background-color: #222222;
                color: #DDDDDD;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                 width:49%;
                 border-left:2px solid #fff

            }