JSFiddle - React, Tailwind, and code Playground

HTML

<div class="w">

    <pre class="container">Просто длинный текст. Просто длинный текст. Просто длинный текст. Просто длинный текст.
Просто длинный текст. Просто длинный текст. Просто длинный текст. Просто длинный текст.
      
Просто длинный текст. Просто длинный текст. Просто длинный текст. Просто длинный текст.</pre>

    <pre class="container">Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. 

Текст. Текст. Текст. Текст. Текст.</pre>

    <pre class="container">Текст.</pre>

</div>

CSS

.w {
  display: block;
  width: 150px;
}

.container {
  margin: 0 0 50px 0;
  padding: 0;
  background-color: red;
  position: relative;
  overflow-x: auto;
  z-index: 9999;
}

JavaScript

// Раскрытие блока //
$(document).ready(function() {



    $('.container').hover(function() {

        this.scrollWidth > 150 && 
        $(this).animate({width: this.scrollWidth},{duration:200})

		}, function() {

        $(this).delay(500).animate({width: "150px"},{duration:200})

	});

});