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;
   width: 50px;
   line-height: 38px;
   text-align: center;
   background: #ccc;
   border: 1px solid #333;
   cursor: pointer;
}

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

JavaScript

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