JSFiddle - React, Tailwind, and code Playground

by RomanFF

HTML

<div class="box">
  <p>левый текст</p>
  <p class="new-el hidden">правый ghjghgjg gjghjgjg текст</p>
</div>

CSS

*{
 margin: 0;
 padding: 0;
}

.box {
  display: flex;
  align-items: center;
  color: white;
  width: 117px;
  height: 80px;
  background: #000;
  transition: width 1s ease-in-out;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
}

p {
  margin-left: 15px;
}
.new-el {
   display: none;
    position: absolute;
    right: 20px;
}

JavaScript

$('.box').on('mouseenter', function(e){
	$(e.currentTarget).css({
  	width: '400px'
  });
  $(e.currentTarget).find('.new-el').delay(500).fadeIn(800);
}).on('mouseleave', function(e){
	$(e.currentTarget).css({
  	width: '117px'
  });
  $(e.currentTarget).find('.new-el').fadeOut(100);
});