JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="nav">Nav</div>
  <div class="text">
     <p>
       This is the paragraph to end all paragraphs.  You
       should feel <em>lucky</em> to have seen such a paragraph in
       your life.  Congratulations!
     </p>
    </div>
</body>

CSS

body {
   font-size: 10px;
   color: #333; }

.nav {
   float: right;
   margin-top: 30px; /* Added to dont overlap result box */
   width: 50px;
   height: 30px;
   text-align: center;
   background: #ccc;
   border: 1px solid #333; }

.text {
   overflow: hidden;
   float: right;
   margin: 5px;
   padding: 5px;
   width: 400px;
   background: #e4e4e4; }

JavaScript

$('.nav').click(function() {
   $('.text p').css({
      'width': $('.text p').width(),
      'height': $('.text p').height()
   });
   $('.text').animate({'width': 'toggle'});
});