JSFiddle - React, Tailwind, and code Playground

by María Fernández

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<div class="container">
    <div class="column_1"></div>
    <div class="column_2"></div>
</div>

CSS

.container {
    display: flex;
}
.column_1 {
    flex: 1;
    height: 60px;
    background: blue;
}
.column_2 {
    width: 120px;
    height: 30px;
    background: green;
}

JavaScript

$('.column_2').hoverIntent({
    over: function () {
        $(this).animate({
            width: '100%'
        }, 500);
    },
    out: function () {
        $(this).animate({
            width: '120px'
        }, 500);
    },
    timeout: 300
});