JSFiddle - React, Tailwind, and code Playground

HTML

<dl id="main">
    <dt>
        <a href="#"></a>
    </dt>
    <dd>
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png" alt="" />
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-linkedin.png" alt="" />
        <img src="http://cdn3.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-whosamungus.png" alt="" />
    <dd>
</dl>

CSS

dt, dd, ul, li {
    margin: 0px;
    pading: 0px;
}

#main dt {
    background: url('http://cdn1.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-twitter.png') 0% 0% no-repeat;
    overflow: hidden;
    width: 256px;
    height: 256px;
}

/* для универсальности, однако изображения и так выравниваются справа по-умолчанию, поэтому приведение к блочному типу необязательно и можно удалить */
#main dt a, #main dd img {
    display: block;
    position: relative;
}

#main dt a {
    background: url('http://cdn1.iconfinder.com/data/icons/gnomeicontheme/22x22/actions/window-close.png') 0% 0% no-repeat;
    float : right;
    width: 24px;
    height: 24px;
}

#main dd {padding: 0px 15px;}

#main dd img { 
    float: left;
    margin-left: 10px;
}