JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
    <div class="member">
        <img src="http://digital-photography-school.com/wp-content/uploads/2010/08/photograph-model-300x214.jpg" alt="John Smith's Profile Picture" class="pic">
        <span class="name"><a href="">John Smith</a></span>
        <span class="skills">PHP, MySQL, Javascript, C#, Java</span>
    </div>
</div>

CSS

#sidebar {
    float: left;
    width: 310px;
}

#sidebar .member {
    height: 60px;
    margin-bottom: 10px;
    vertical-align: middle;
}

#sidebar .member .name {
    font-size: 15px;
    font-weight: bold;
}

#sidebar .member .pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}

#sidebar .member .skills {
    display: block;
    font-size: 12px;
    overflow: hidden;
}