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;
  transition: width 1s ease-in-out;
}

p {
  width: 150px;
  background: red;
  text-align: center;
}
.new-el {
  width: 0;
  background: orange;
}
.container {
  display: flex;
  align-items: center;
}
span {
     display: inline-block;
    min-width: 150px;
}

JavaScript

$('.box').on('mouseenter', function(e){
	$(e.currentTarget).css(
  	'width', '300px');
  $(e.currentTarget).find('span').delay(500).fadeIn(800);
	/* $('.new-el').css('width', '150px') */
}).on('mouseleave', function(){
	$('.new-el').css('width', '0')
});