JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a"></div>
<div id="b"></div>

CSS

#a, #b {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
            -webkit-transition: width .6s ease-in-out;
    -moz-transition: width .6s ease-in-out;
    -o-transition: width .6s ease-in-out;
    -ms-transition: width .6s ease-in-out;
    transition: width .6s ease-in-out;
}
#b {
    background: #a55;
    right: 0;
}
#a {
    background: #55a;
    left: 0;
}
#a:hover, #b:hover {
    width: 100%;
    z-index: 1;
}