JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div class="flex">
  <div class="flex1"></div>
  <div class="flex2"></div>
  <div class="flexBox"></div>
  <div class="flex3"></div>
</div>

CSS

.flex {
        background: orange;
        height: 300px;
        width: 500px;
        display: -webkit-flex;
        display: flex;
     
    }
    .flex1 {
        background: red;
        height: 100px;
        width: 100px;
     
    }
    .flex2 {
        background: green;
        height: 100px;
        width: 100px;
     
    }
    .flexBox {
      -webkit-flex:1;
	    flex:1;
    }
    .flex3 {
        background: blue;
        height: 100px;
        width: 100px;
     
    }