JSFiddle - React, Tailwind, and code Playground

HTML

<div class="engloba-tudo">

  <div class="produtos">
     Produto 1<br />
     Produto 2<br />
     Produto 3<br />
     Produto 4<br />
     Produto 5<br />
     Produto 6<br />
  </div>
  <div class="subtotal">
     Total: R$ 12,00
  </div>
  
</div>

<button>Add Produto</button>

CSS

.engloba-tudo {
  
  position:fixed;
  top:0;
  left:0;
  width:80%;
  margin: 0 10%;
  border-left:1px solid #333;
  border-right:1px solid #333;
  border-bottom:1px solid #333;
  
  background: #eee;
}
.produtos {
  display:none;
  width:100%;
  float:left;
  padding:.7rem;
}
.subtotal {
  width:100%;
  float:left;
  border-top:1px solid #333;
  padding:.7rem;
  cursor:pointer;
  box-sizing:border-box;
}

button {
  margin-top: 100px;
}

JavaScript

$(".subtotal").click(function() {
   $(".produtos").slideToggle(300);
})

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