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">
                    <span id="menu1" class="sortMenu">
                    <li><a id="calc"  href="#"  ></a></li>
                    <li><a id="convert" href="#" ></a></li>
                    </span>
                </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="#"></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;
    display:none;
}

JavaScript

function closing () {
        $('.utilitiDifferent').on('click', function () {
            if ($('.sortMenu').css("display") == "block") {
                $('.sortMenu').css("display", "none");
            }
            else {
                $('.sortMenu').css("display", "block");
            }});
    }
    closing ();