JSFiddle - React, Tailwind, and code Playground

by l2banners

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;
  overflow: hidden;
}

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

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

.item__container {
  display: inline-block;
  width: 0;
  transition: .3s all;
  margin-left: 6px;
}

JavaScript

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

	let container = document.createElement('div');
  container.className = "item__container";
  
  let content = document.createElement('span');
	content.innerHTML = ' long';
	container.appendChild(content);

	this.appendChild(container);
  
  setTimeout(() => {
		container.style.width = content.offsetWidth + 'px'
  }, 0);


}));