JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

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 {
    position: relative;
}
.column_1 {
    position: absolute;
    width: calc(100% - 120px);
    height: 60px;
    background: blue;
}
.column_2 {
    position: absolute;
    right: 0;
    width: 120px;
    height: 30px;
    background: green;
    
    -webkit-transition: 500ms width;
    -moz-transition: 500ms width;
    -ms-transition: 500ms width;
    -o-transition: 500ms width;
    transition: 500ms width;
}

.column_2:hover {
    width: 100%;
}