JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="element1">element1</a>
<a href="#" id="element2">element2</a>

<div id='qwe'>
    <ul>
        <li>metin</li>
        <li>metin</li>
        <li>metin</li>
        <li>metin</li>
        <li>metin</li>
        <li>metin</li>
        
    </ul>
</div>

CSS

#qwe {
    border: 1px solid #000;
    width: 500px;
    overflow:hidden;
}

JavaScript

$('#element1').click(function(){
    $('#qwe').animate({width:'500px'}, 500);
});

$('#element2').click(function(){
    $('#qwe').animate({width: '800px'}, 500);
});