JSFiddle - React, Tailwind, and code Playground

HTML

<button id="toggle">toggle transition</button>

<div class="main">
    <div class="main-col"></div>
    <div class="right-col"></div>
</div>

CSS

/* 
 * When we click: the right col has to animate from a fixed width (the default) to a % width (when unfolded)
*/

.right-col {
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    -ms-transition:width .8s ease;
    -o-transition:width .8s ease;
    transition:width .8s ease;    
    
    min-width:50px; /* min-width as the pixel value */
    width:0%; /* width as the % value */
    animated: hola;
}



/* boring things */
.main { position:relative; height:200px; }
.main-col { margin-right:50px; height:200px; outline:1px solid lime; }
.right-col { background:pink; position:absolute; right:0; top:0; bottom:0; }


@keyframe hola
{
      width:100% !important; /* !important because min-width is stronger than width */

}