JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bay-wrapper">
                                <div class="bay-cell-full">Bay 20</div>


                                     <div class="bay-cell">1</div>
                                     <div class="bay-cell">7</div>
                                      <div class="bay-cell">2</div>
                                     <div class="bay-cell">8</div>
                                      <div class="bay-cell">3</div>
                                     <div class="bay-cell">9</div>
                                      <div class="bay-cell">4</div>
                                     <div class="bay-cell">10</div>
                                      <div class="bay-cell">5</div>
                                     <div class="bay-cell">11</div>
                                      <div class="bay-cell">6</div>
                                     <div class="bay-cell">12</div>


                                </div>

CSS

.bay-wrapper{ display: table; width:10%; height:auto; float:left; background:#fff; text-align:center;
    display: table;
    border-collapse:collapse;
    box-sizing:border-box;
}


.bay-cell-full{
    display: table-cell;
    border:1px solid #000;
    float:left;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

.bay-cell{
    display: table-cell;
    border:1px solid #000;
    border-collapse:collapse;
    float:left;
    width:50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}