JSFiddle - React, Tailwind, and code Playground

HTML

<div id='outer'>
    <div id='notOuter'>
        <div id='content'>
            <div id='img'>
            </div>
            <div id='label'>
                Text example
            </div>
            <div id='closeButton'>
                X
            </div>
        </div>
    </div>
</div>

CSS

#outer
{
    background: rgba(7, 7, 7, .7);
    width: 70px;
    height: 32px;
    -moz-transition: .35s all;
}
#outer:hover
{
    width: 210px;
}
#notOuter
{
    width: 100%;
    height: 100%;
}
#img
{
    background-image: -moz-radial-gradient(50% 50%, circle, #f00, #070707 100%);
    width: 21px;
    height: 21px;
    margin: 5px 0 0 3px;
    float: left;
}
#label
{
    width: 0;    
    color: #989898;
    opacity: 0;
    -moz-transition: .7s all;
    float: left;
}
#outer:hover #label
{
    width: 140px;
    opacity: 1;
    line-height: 28px;
}
#closeButton
{
    color: #f00;
    height: 32px;
    font-size: 21px;
    float: right;
}