JSFiddle - React, Tailwind, and code Playground

by seano666

HTML

<div class="wrap">
    <div class="expando five"></div>
    <div class="expando four"></div>
    <div class="expando three"></div>
    <div class="expando two"></div>
    <div class="expando one"></div>
</div>

CSS

.wrap
{
    width:auto;
    height:300px;
    border:1px solid black;
}

.expando
{
    height:300px;
    width:80px;
    float:right;    
}

.one{ background-color:blue; }
.two{ background-color:red; }
.three{ background-color:green; }
.four{ background-color:orange; }
.five{ background-color:purple; }

JavaScript

$('.expando').hover(function(){
    $(this).animate({width:"100px"},500);
    },function(){
    $(this).animate({width:"80px"},500);
});