JSFiddle - React, Tailwind, and code Playground

by RomanFF

HTML

<body>
<ul>
  <li class="flex-box ">
    <p class="left-text">Левый текст</p>
    <p class="right-text">правый текст</p>
  </li>
</ul>
</body>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
ul{
  background-color: black;
  color:white;
  margin: 0 auto;
}
body{
  display: flex;
}
.flex-box{
  display: flex;
  align-items:center;
  height:80px;
}
.right-text{
  display:none;
  margin-left: 10px;
}
.right-text{
}

JavaScript

let li = document.querySelector('.flex-box');

li.addEventListener('mouseenter', openText);

function openText(){
	this.style.width = '300px'
  document.querySelector('.right-text').style.display = 'block';
  li.removeEventListener('mouseenter', openText);
  li.addEventListener('mouseleave', closeText);
}

function closeText(){
  document.querySelector('.right-text').style.display = 'none';
  li.addEventListener('mouseenter', openText);
  li.removeEventListener('mouseleave', closeText);
}