JSFiddle - React, Tailwind, and code Playground

by RomanFF

HTML

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

CSS

*{
 margin: 0;
 padding: 0;
}
.box {
  display: flex;
  align-items: center;
  color: white;
  height: 80px;
  background: #000;
  overflow: hidden;
  margin: auto;
}

p {
  width: 150px;
  background: red;
  text-align: center;
}
.new-el {
  width: 0;
  background: orange;
  transition: width 1s ease-in-out;
}
.container {
  display: flex;
  align-items: center;
}
span {
     display: none;
    min-width: 150px;
}

JavaScript

$('.box').on('mouseenter', function(e){
	$('span').fadeIn();
	$('.new-el').css('width', '150px');  
}).on('mouseleave', function(){
	$('.new-el').css('width', '0').delay(500);
  $('span').fadeOut(1000);
});