JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<span>Some item's text 1</span>
<button>x</button>
</div>
<div>
<span>Some item's text 2</span>
<button>x</button>
</div>
<div>
<span>Some item's text 3</span>
<button>x</button>
</div>
<div>
<span>Some item's text 4</span>
<button>x</button>
</div>
<div>
<span>Some item's text 5</span>
<button>x</button>
</div>
<div>
<span>Some item's text 6</span>
<button>x</button>
</div>

SCSS

div {
  display: flex;
  justify-content: space-between;
  height: 30px;
  background: lightgray;
  border-bottom: 1px solid gray;
  width: 200px;
  transition: margin-left 100ms 0s, opacity 100ms 0s, height 200ms 100ms;
  transition-timing-function: ease-out;
  
  button {
    border: none;
    padding: none;
    background: none;
    color: firebrick;
    cursor: pointer;
    
    &:focus {
      border: transparent;
    }
    
    &:active {
      border: 1px solid red;
    }
  }
}

.deleting {
  margin-left: 200px;
  opacity: 0;
  height: 0;
}

JavaScript

[...document.querySelectorAll(`div`)].forEach(el => {
  el.querySelector(`button`).addEventListener(`click`, evt => 
   { 
      el.classList.toggle(`deleting`);
   });
  el.addEventListener(`transitionend`, ({propertyName}) => {
  if (propertyName === 'height') {
    document.body.removeChild(el);
  } 
  });
});