JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<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: vertical;
          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;
      }