JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="red red-left">red-left</div>
    <div class="yellow">yellow</div>
    <div class="red red-right">red-right</div>
</div>

CSS

.container{
  width:100%;
    border: 2px solid black;
    padding:0 100px;
}
.red{
    background:red;  
    width:100px;
    display:inline-block;
    margin:2px;
    position:fixed;
}
.red-right{
    right:0px
}
.red-left{
    left:0px
}
.yellow{     
    width:100%;
    background:yellow;
    display:inline-block;
}