JSFiddle - React, Tailwind, and code Playground

HTML

<div id="language-select">
                <span id="selected-language" class="deutsch-flag";?>"></span>
                <ul id="language-list">

                    <li><span class="english-flag";?>"></span></li>

                </ul>
            </div>

CSS

#language-select {
    float: right;
    margin-right: 100px;
    margin-top: 5px;
    margin-bottom: 5px;
}
#language-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
}
#selected-language {
    border: 1px solid #87848d;
    border-radius: 5px;
}
.deutsch-flag {
    width: 18px;
    height: 15px;
    display: inline-block;
    background-image: url("../img/deutsch.png");
    background-size: 18px 15px;
    background-repeat: no-repeat;
}
.english-flag {
    width: 18px;
    height: 15px;
    display: inline-block;
    background-image: url("../img/english.png");
    background-size: 18px 15px;
    background-repeat: no-repeat;
    border: 1px solid #87848d;
    border-radius: 0 0 5px 5px;
}

JavaScript

$(function() {
    
    //system.loadModule("loadmenu", "menu", $("#menu").attr("active"));
    
    $( "#language-select" ).mouseover(function() {
        $("#language-list").show();
        $("#language-select span").css("border-radius-bottom-left","0");
        $("#language-select span").css("border-radius-bottom-right","0");
        
    });
    $( "#language-select" ).mouseout(function() {
        $("#language-list").hide();
    });
});