JSFiddle - React, Tailwind, and code Playground

HTML

<div class="expandable">
  <div>
    <button class="services_btn">expand</button>
  </div>
</div>

CSS

.expandable {
  width: 100px;
  height: 100px;
  padding: 1em;
  border: solid 1px gray;
  
  transition: height 0.3s ease-out, width 0.3s ease 0.5s;
}
.expandable.open {
  width: 150px;
  height: 150px;
}

JavaScript

$('.services_btn').click(function(e){
  $(this).closest('.expandable').addClass('open');
  e.preventDefault();
});

$('body').on('click', function(e){
  if (!$(event.target).closest('.expandable').length) {
    $('.expandable').removeClass('open')
  }
})