JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left">
        <ul class="dropdown">
            <li>
                <a id="utiliti" class="utilitiDifferent" href="#"><span class="icon"></span><span class="textMenu"></span></a>
                <ul class="dropdown-inside">
                    <li><a id="calc"  href="#"  >45452</a></li>
                    <li><a id="convert" href="#" >43534534677</a></li>
                </ul>
                <br>
                <a id="different" class="utilitiDifferent" href="#"><span class="icon"></span><span class="textMenu"></span></a>
                <ul class="dropdown-inside2">
                    <li><a id="sort" class="sortMenu" href="#">5y474767647</a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS

#left {
    position: absolute;
    top: 100px;
    bottom: 150px;
    background: #EAD1DC;
    width: 300px;
    word-wrap: break-word;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
}

span:hover  {
    cursor: pointer;
}

#left .icon {
    display: block;
    float: left;
    background: black;
    width: 10px;
    height: 10px;
    margin-right: 10px;
}


#left ul.dropdown {
    margin: 50px 0 0 10px;
    padding: 10px 10px 10px 10px;
}
#left a {
    text-decoration: none;
}
#left li, ul {
    list-style-type: none;
    line-height: 80%;
}

#left li {
    padding-top: 10px;
}

#menu1, #sort  {
    margin-left: -10px;

}

JavaScript

function closing () {
    $('.utilitiDifferent').on('click', function () {
        $(this).next('ul').toggle()
    });
}
closing ();