JSFiddle - React, Tailwind, and code Playground

HTML

<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>

<div class="subtotal">
  <div class="produtos">
    <p>Produto 1</p>
    <hr>
    <p>Produto 2</p>
    <hr>
    <p>Produto 3</p>
  </div>
    <hr>
    <p>Subtotal: x</p>
  
 
</div>
 <span class="subtotal-menu" style="cursor: pointer;">O</span>
 <span class="close-subtotal" style="display: none; cursor: pointer;">X</span>
 
 <button>add Produto</button>

CSS

.subtotal {
  position: relative;
  width: 200px;
  top: -170px;
  margin: 0 auto;
}

span {
  position: absolute;
  top: 0;
}

@keyframes slideDown {
  from {
    top: -170px;
  }
  to {
    top: 0;
  }
}

.slideDown {
    animation-name: slideDown;
    animation-duration: .5s;
    animation-fill-mode: both;
}

@keyframes slideUp {
  from {
    top: 0;
  }
  to {
    top: -170px;
  }
}

.slideUp {
    animation-name: slideUp;
    animation-duration: .5s;
    nimation-fill-mode: both;
}

JavaScript

$('.subtotal-menu').click(function(event) {
				$('.subtotal').addClass('slideDown').removeClass('slideUp');
				$('.subtotal-menu').hide();
				$('.close-subtotal').show();
});

$('.close-subtotal').click(function(event) {
				$('.subtotal').addClass('slideUp').removeClass('slideDown');
				$('.subtotal-menu').show();
				$('.close-subtotal').hide();
});

$('button').click(function() {
			$('.produtos').append('<p>Produto X</p><hr>');
});