JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <button class="button">click to change</button>
</div>

<div class="change">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus neque, malesuada id scelerisque et, ornare id leo. Donec commodo, eros a lobortis dictum, nunc arcu euismod ante, ut convallis leo odio sit amet ex. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vulputate ultrices ipsum, sit amet viverra purus sollicitudin laoreet. Vivamus consectetur, ex sed imperdiet tristique, dolor odio vulputate nisl, at placerat purus dolor sed justo.
    Donec porta tellus sit amet dapibus rutrum. Ut vel neque tincidunt, varius risus a, egestas nulla. Phasellus id neque id quam gravida tristique nec ac quam. Morbi risus neque, ornare in justo vel, vehicula ultrices sapien. Praesent aliquam ornare
    malesuada. Morbi est arcu, commodo at felis eu, semper vehicula lectus. Aliquam ultrices felis ut blandit tempor. Cras posuere vitae enim et venenatis. Etiam congue, nunc sed condimentum tincidunt, mi ex tincidunt tellus, at mattis purus erat vitae
    nulla. Ut et arcu vel sapien maximus sodales. Vivamus viverra imperdiet ante eget volutpat.</p>
</div>

<span>The value of that height property will be added to the padding-top of the div with the paragraph in</span>

CSS

* {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  font-family: sans-serif;
}

html,
body,
span,
div,
p {
  margin: 0;
  padding: 0;
}

div:nth-child(1) {
  position: fixed;
  top: 0;
  width: 100vw;
  background: DodgerBlue;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

button {
  width: 100px;
  height: 50px;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: white;
  border: solid 1px white;
  text-align: center;
}

div:nth-child(2) {
  padding-left: 50px;
  padding-right: 50px;
  transition: all .5s ease;
}

span {
  padding: 25px;
  position: fixed;
  bottom: 0;
  width: 100vw;
  background: DodgerBlue;
  color: white;
  text-align: center;
  text-transform: uppercase;
}

.active {
  border: solid 1px DodgerBlue;
  background: white;
  color: DodgerBlue;
}

JavaScript

var tagsHeight = $('span').outerHeight();

$('.button').click(function() {
  var active = $(this).toggleClass('active').hasClass('active');
  $(".change").css('padding-top', !active ? '0' : tagsHeight);
});