JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div-1"></div>
<div id="div-2">
  <p>I want all this text to show up and it could be any length...</p>
</div>

CSS

#div-1 {
  background-color: red;
  position: absolute;
  width: 25%;
  min-height: 100vh;
  transition: 0.5s;
  left: 0;
  top: 0;
  z-index: 1;
}

#div-2 {
  background-color: blue;
  position: absolute;
  max-width: 0;
  min-height: 100vh;
  transition: 0.5s;
  left: 0;
  top: 0;
  overflow: hidden;
}

.shown {
  min-width: 25% !important;
  max-width: 500px !important;
  transition: 0.5s;
}

JavaScript

$('#div-1').click(function() {
	if ($('#div-2').hasClass('shown')) {
    $(this).css('left', 0);
    $('#div-2').removeClass('shown');
  } else {
    // $('#div-2').css('width', 'auto');
    $('#div-2').addClass('shown');
    $(this).css('left', $('#div-2').width());
    
  }
})