JSFiddle - React, Tailwind, and code Playground

by mmis1000

HTML

<div id='a'>
    <div id='d'><div class='item'>.</div>
    </div>
    <div id='c'><div class='item'>.</div>
    </div>
</div>

CSS

#a {
    position:relative;
    padding:0px;
    margin:0px;
    background:red;
    top:0px;
    left:0px;
    height:auto;
    width:100%;
}
#c {
    background:pink;
    width:25%;
    height:100%;
    position:relative;
    top:0px;
    left:0px;
}
#d {
    background:gray;
    width:25%;
    height:100%;
    position:absolute;
    top:0px;
    right:0px;
}
body {
    min-height:100%;
    position:relative;
    top:0px;
    left:0px;
    padding:0px;
    margin:0px;
}
.item{
    height:90px;
    width:40px;
    background:rgba(0, 0, 0, 0.0);
}

JavaScript

$('#c').hover(function () {
    $(this).animate({
        width: '50%'
    })
}).mouseleave(function () {
    $(this).animate({
        width: '25%'
    })
})
$('#d').hover(function () {
    $(this).animate({
        width: '50%'
    })
}).mouseleave(function () {
    $(this).animate({
        width: '25%'
    })
})