JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!--Flexbox--> 
<div class="box">
      <div>un</div>
      <div>deux</div>
      <div>trois</div>
    </div>

CSS

.box {
        /* basic styling */
        width: 350px;
        height: 95px;
        border: 1px solid #555;
        font: 14px Arial;
      
        /* flexbox setup */
        display: -webkit-box;
        -webkit-box-orient: horizontal;
      
        display: -moz-box;
        -moz-box-orient: horizontal;
      
        display: box;
        box-orient: horizontal;
      }
      
      .box > div {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
      
        -moz-transition: width 0.7s ease-out;
        -o-transition: width 0.7s ease-out;
        -webkit-transition: width 0.7s ease-out;
        transition: width 0.7s ease-out;
      }
      
      /* our colors */
      .box > div:nth-child(1){ background : #FCC; }
      .box > div:nth-child(2){ background : #CFC; }
      .box > div:nth-child(3){ background : #CCF; }
      
      .box > div:hover { 
        width: 200px;
      }