JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">
  <div class="item">item 1</div>
  <div class="item">item 2</div> 
  <div class="item">item 3</div>
  <div class="item">item 4</div>  
</div>

CSS

.cont {
  margin: 100px;
  display: flex;
  transition: all 0.2s ease-in-out;  
}

.item {
  background: lightgray;
  border-radius: 4px;
  padding: 2px 5px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.item:not(:last-child) {
  margin-right: 10px;
}

.item:hover {
    padding: 2px 20px;
}

JavaScript

document.querySelectorAll('.item').forEach((el) => el.addEventListener("click", function(){

this.textContent += " long";


}));