JSFiddle - React, Tailwind, and code Playground

by Ihor Gorobets

HTML

<div class="content">
    <div class="content-item side">
        1
    </div>
    <div class="content-item main">
        2
    </div>
    <div class="content-item side">
        3
    </div>
</div>

CSS

.content {
    position: relative;
    display: table;
    width: 100%;
    height: 200px;
    border-collapse: collapse;
    border-spacing: 0;
}
.content-item {
    position: relative;
    display: table-cell;
    border: 1px solid #fff;
    background: #ccc;
    color: #fff;
    
-webkit-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
   -moz-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
     -o-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
        transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */

-webkit-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); 
   -moz-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); 
     -o-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); 
        transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
}
.content:hover > *, .content > * {
    width: 25%;
}

.side:hover  {
    width: 50%;
}

.main, .main:hover {    
    width: 50%;
}