JSFiddle - React, Tailwind, and code Playground

by heriberto perez

HTML

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

CSS

.flex-container{
  display:flex;
  flex-direction: row;
  border:2px blue solid;
}

.flex-container > span{
  border:1px red solid;
  flex-grow: 0;
  width: 20%;
}

.container-flex {
  display: flex;
  flex-direction: col;
  flex-grow: 1;
}
.flex-container > .flex-item{
  border:1px red solid;
}