JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

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 */
}
.side {
    width: 25%;
}
.main {
    width: 50%;
}

.active {
    width: 50%;
}
.small {
    width: 25%;
}

JavaScript

var $table = $('.content'),
    $columns = $('.content-item');

$columns.on('mouseenter', function () {
    $(this).addClass('active').siblings().addClass('small');
});

$columns.on('mouseleave', function () {
    $(this).removeClass('active').siblings().removeClass('small');
});