JSFiddle - React, Tailwind, and code Playground

HTML

<span class="cselwr">
<span class="csel closed">
    <span> Выберите страну </span> 
    <span class="treug">&#8595;</span>
    
    <span class="options">
    <ul>
        <li class="option">Россия</li>
        <li class="option">США</li>
    </ul>
    </span>
</span>
</span>

CSS

.cselwr { 
    border : 0px #60636B solid;
    border-width : 1px 0 0 1px;
    padding : 0 1px 1px 0;
}
.csel { 
    border : 1px #8A918E solid;
    padding : 1px;
    padding-bottom : 0;
}
.treug {
    background-color : #8A918E;
    padding : 0 5px;
}

.csel.closed .options { display : none  }

.csel .options {
    position : relative;
    overflow : hidden;
}

.options ul {
    right : 4px;
}

JavaScript

var a = document.getElementsByTagName( "span" ), i = a.length;

while( i-- ) if ( a[i].className === "treug" ) a[i].onclick = handler;
    
    function handler(e){
        
        // current select;
        var csel = (e ? e.target : window.event.srcElement).parentNode;
        
        var opened = !!~csel.className.indexOf( "opened" );
        
        csel.className = "csel " + (opened ? "closed" : "opened" );
    }