JSFiddle - React, Tailwind, and code Playground

HTML

<div id="user_wrap">

    <div id="user_info">
        <div id="user_welcome">
        Welcome <b>Christopher</b>
        </div>
        
        <div id="user_logout">
        Logout?
        </div>
    </div>
    
    <div id="user_pic">
        <img src="http://placehold.it/38x37" width="38" height="37" />
    </div>

</div>

CSS

#user_wrap{
float: right;
height: 40px;
margin-right: 10px;
margin-top: 5px;
position: relative;
    
    background-color:black;
}


#user_info {
    float:left;
}

#user_welcome{
position: relative;
text-align: right;
font-size: 11.8px;
font-family: "Helvetica Neue", Helvetica, Arial;
color: #e3e3e3;
margin-bottom: 3px;
padding-top: 3px;
}

#user_logout{
position: relative;
text-align: right;
font-size: 11.8px;
font-weight: 200;
font-family: "Helvetica Neue", Helvetica, Arial;
color: #939393;

}

#user_pic{
border-radius: 5px;
float: left;
height: 37px;
margin-left: 10px;
width: 38px;

-moz-box-shadow: 0 1px 4px #000000;
-webkit-box-shadow: 0 1px 4px #000000;
box-shadow: 0 1px 4px #000000;
}