JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div id="prvi">
    <a href="#">link</a>
  </div>
  <div id="drugi">bbbbb</div>
  <div id="treci"></div>

CSS

body {
  overflow: hidden;
}
div {
  display: inline-block;
  position: relative;
  float: left;
  height: 100%;
  vertical-align: top;
}
div#prvi {
  width: 200px;
  border-right: 1px solid #000;
}
div#drugi {
  overflow: hidden;
  width: 0;
  -webkit-transition: width .3s ease;
  -moz-transition: width .3s ease;
  -o-transition: width .3s ease;
  background-color: red;
}
div#drugi.active {
  width: 300px;
}
div#treci {
  height: 200px;
  width: 200px;
  background-color: yellow;
}

JavaScript

$('#prvi').on('click', 'a', function(e){
  e.preventDefault();
  
  $('#drugi').toggleClass('active');
  
  
});