JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="btn">Collapse/Expand Sidebar</a>
<div style="text-align:center;">
<div class="sidebar">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum, erat a blandit tempus, erat dui pretium lectus, ut pharetra ante lorem at libero. Proin nec tortor ac justo vehicula ullamcorper eget eget mauris. In mollis lectus non ante tempus, vel sollicitudin quam varius.</p>
</div>

<div class="sidebar">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum, erat a blandit tempus, erat dui pretium lectus, ut pharetra ante lorem at libero. Proin nec tortor ac justo vehicula ullamcorper eget eget mauris. In mollis lectus non ante tempus, vel sollicitudin quam varius.</p>
</div>
</div>

CSS

#btn {background:#ddd; padding: 5px; margin-bottom:20px; display:block; text-decoration: none;}

.sidebar {
    width: 200px;
    border: 1px solid #ddd;
    -webkit-transition: width 2s;
          transition: width 2s;
    //white-space: nowrap;
    display:inline-block;
    
}

.sidebar-collapsed {
    width: 50px;
    -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
}

JavaScript

$('a#btn').click(function () {
        $('.sidebar').toggleClass('sidebar-collapsed');
    });