JSFiddle - React, Tailwind, and code Playground

by Krzysztof Jedraszewski

HTML

<button type="button" id="col">Collapse</button>
<button type="button" id="ex">Expand</button>

<div class="push">
  xcfgdfgdfgdfg
</div>
<div class="questionnaire">
</div>

CSS

.questionnaire {
  position: fixed;
  background-color: red;
  right: 25px;
  bottom: 0px;
  z-index: 150;
  display: block;
  width: 500px;
  transition: height 2s;
  -webkit-transition: height 2s;
  height: 0px;
}

.expanded {
  height: 230px;
}

.pushUp {   position: absolute;
  bottom: 230px;
}

.push {
  position: absolute;
  background-color: green;
  display: block;
  width: 500px;
  height: 50px;
  transition: bottom 2s;
  -webkit-transition: bottom 2s;
}

JavaScript

$("#col").click(function() {
  $('.questionnaire').removeClass('expanded');
  $('.push').removeClass('pushUp');
});
$("#ex").click(function() {
  $('.questionnaire').addClass('expanded');
  $('.push').addClass('pushUp');
});