JSFiddle - React, Tailwind, and code Playground

HTML

<div id="profile_block">
                    <div id="left_profile">NickName <br>
                        Новых сообщений: 0
                    </div>
                    <div id="right_profile">
                        <div class="sub-wrapper">
                           <ul>
                            <li>Element</li>
                            <li>Element</li>
                            <li>Element</li>
                            <li>Element</li>
                            <li>Element</li>
                           </ul>                            
                        </div>
                        </div>
                </div>

CSS

#profile_block{
    float: right;
    height: 75px;
    width: 430px;
}
#left_profile{
    float: left;
    width: 320px;
    text-align: right;
    padding-top: 35px;
}
#right_profile{
    background: url(../images/profaile-foto.png) no-repeat;
    width: 75px;
    height: 75px;
    float: right;
     border-radius: 10px;
    border: 3px solid #3c3c2b;
    position: relative;
    transition: all .2s;
}

#right_profile .sub-wrapper{
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 65px;
    height: 0;
    width: 200px;
    -webkit-transition: .2s height;
    -o-transition: .2s height;
    transition: .2s height;
}

#right_profile ul{
    width: 200px;
    overflow: hidden;
    background: #1cbcf1;
    position: absolute;
    list-style: none;
    z-index: 999;
    border-radius: 10px;
    text-align: right;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
     padding: 5px;
    border: 3px solid #3c3c2b;   
}
#right_profile:hover .sub-wrapper{
    /* margin-left: -135px; */
    /* margin-top: 75px; */
    height: 150px;
}