JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="row">
  <div class="left"></div>
  <div class="left" style="background: blue;"></div>
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div.row {
  width: 100%;
}
div.left {
  width: 50%;
  height: 200px;
  float: left;
  transition: 1s;
  background: red;
}

JavaScript

$('.left').hover(function(){
		$('.left').css({ width: '45%' })
    $(this).css({ width: '55%' })
},function(){
		$('.left').css({ width: '50%' })
    /* $(this).css({ width: '60%' }) */
})