JSFiddle - React, Tailwind, and code Playground

by cent cent

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="left">
Content
</div>
<div class="right">
<div class="fixedContainer">
X
</div>
Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    right: 0;
    top: 0%;
    transform: translateX(-100px);
}

JavaScript

$('.fixedContainer').on('click', function() {
	$('.right').animate({'width': '23%'});
  $('.left').animate({'width': '77%'});
});