JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
  <div class="item first"> one </div>
 <!-- <div class="item"> one </div> -->
  <div class="item super"> one </div>
</div>

CSS

.item{
  border:1px solid red;
  height:50px;
  display:inline-flex;
 
}
#wrap{
  border:5px solid red ; 
  height:300px;
  display:flex;
  flex-direction:row
}
.super{
  width:50px;
}
.first{
  flex: 1 1 50px; 
}