JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<div class="MainDiv">
    <div class="LeftDiv"> Left </div>
    <div class="RightDiv"> Right </div>    
    <div class="CenterDiv"> Center </div>
</div>

CSS

.MainDiv{
    position: fixed;
    background-color: green;
    width: 100%;
    min-width: 500px;
    height:40px;
    line-height: 40px;
}

.LeftDiv{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height:40px;
    line-height: 40px;
    text-align: center;
    background-color: blue;
    min-width: 60px;
}

.RightDiv{
    display: block;
    position: absolute;
    right: 0px;
    top:0px;
    width: 100px;
    height:40px;
    line-height: 40px;
    text-align: center;
    background-color: yellow;
    min-width: 60px;
}

.CenterDiv{
    display: block;
    text-align: center;
    /*min-width: 320px;*/
    background-color: aqua;    
}