JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
  <div class="left">flex item 1</div>
  <div class="right">
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div> 
  </div>
</div>

CSS

.flex-item{
  border:4px red solid;
  flex-grow:0;
  width:15%;
}

.flex-container{
  display:flex;
  flex-direction:row;
  border:4px blue solid;
  justify-content:space-between;
}

.flex-container > .left{
  width:15%;
  border:4px red solid;
}

.flex-container > .right{
  display:flex;
  flex-direction:row;
  border:4px lime solid;
  width:30%;
}

.flex-container > .right > div{
  border:4px red solid;
  width:50%;
}