JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
    <ul>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
       ...

CSS

.test ul {
width:50%;
overflow:hidden;
height:150px;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.test li {
float:left;
width:100px;
}

.test.collapse ul {
width:50%;
height:auto;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

JavaScript

$(document).ready(function(){
  $(".button").click(function(){
    $(".test").toggleClass("collapse");
  });
});