JSFiddle - React, Tailwind, and code Playground

by mrmamen

HTML

<div id="mainMenu">
    <div id="left">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
       </div>
    
    <div id="right">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block">     </div>
    </div>
</div>

CSS

#mainMenu div {
    display: inline-block;
    border: solid 1px black;
}
#mainMenu {
    border: solid 1px yellow;
    display: table-row;
    width: 100%;
}
div.block{
    border-color: red;
    background-color: purple;
    height: 30px;
    width: 30px;
}

div#left, div#right{
    display: table-cell;
}

#right{
    white-space: nowrap;
}

#left{
    width: 100%;
}