JSFiddle - React, Tailwind, and code Playground

by RomanFF

HTML

<li class="price-flex-animated">
  	<div class="general-text">
			<h3 class="price-title">Классическая модельная стрижка</h3>
			<p>1300₽ | <span class="price__time">45 мин/1 час</span></p>
					  </div>
					  <p class="new-el">мытьё головы ДО/ПОСЛЕ | процесс стрижки | коррекция длины бровей | окантовка опасной бритвой | опаливание ушей | нанесение лосьона | укладка волос</p>
            </li>

CSS

*{
margin: 0;
padding: 0;
}
.price-flex-animated{
 background-color: black;
 color:white;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 
  width: 300px;
  height: 80px;
  position:relative;
  
  margin: 0 auto;
  transition: width 1s ease-in-out;
  overflow:hidden;
}
.price-flex-animated:hover{
  justify-content: space-between;
}
.general-text{
  width:180px;
}
.new-el{
  display: none;
  position:absolute;
  left: 202px;
  top: 18px;
  width: ;
  height: 30px;
  font-size:12px;
}

JavaScript

$('.price-flex-animated').on('mouseenter', function(e) {
  $(e.currentTarget).css({
    width: '500px'
  });
  $(e.currentTarget).find('.new-el').delay(700).fadeIn(800);
}).on('mouseleave', function(e) {
  $(e.currentTarget).css({
    width: '300px'
  });
  $(e.currentTarget).find('.new-el').fadeOut(100);
});