JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list">
 
  <section class="color" style="background: red"></section>

  <section class="color" style="background: blue"></section>
  
  <section class="color" style="background: green"></section>
  
  <section class="color" style="background: yellow"></section>

  <section class="color" style="background: orange"></section>
    
</div>

CSS

section{
  height:200px;
}

.list {
  display: flex;
}

.color {
  display: flex;
  flex: 1 1 10em;  
  overflow: hidden;
  transition: flex 500ms;
}

.color:hover {
  flex: 1 1 40em; 
}