JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="menu">
    <div class="one">
      one
    </div>
    <div class="two">
      two
    </div>
    <div class="remaining">
      remaining
    </div>
    <div class="three">
      three
    </div>
  </div>
</div>

<p>
the width of [one][two][remaining][three] are unknown.
<br/><br/>
[one],[two],[three] should only take up as much space as they need for their inner text.
<br/><br/>
[remaining] should take up what remains, pushing [three] to the end, essentially not showing any orange.
</p>

CSS

.container{
  width:100%;
  background-color:tomato;
  padding:4px 0;
}
.menu{
  background-color:orange;
  width:300px
}
.one,.two,.three{
  background-color:dodgerblue;
}
.remaining{
  background-color:green;
}
.menu,.one,.two,.three,.remaining{
  padding:5px;
}
div{
  display:inline-block;
  border:1px solid black;
}