JSFiddle - React, Tailwind, and code Playground

HTML

<div id="friend_select">
    <div class="Friend">
        <img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
        <span class="Name">First Name Last Name 1</span>
    </div>
    <div class="Friend">
        <img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
        <span class="Name">First Name Last Name 2</span>
    </div>
    <div class="Friend">
        <img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
        <span class="Name">First Name Last Name 3</span>
    </div>
    <div class="Friend">
        <img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
        <span class="Name">First Name Last Name 4</span>
    </div>
</div>

CSS

#friend_select{ padding: 5px; width: 400px; height: 500px; }
.Friend{ height: 80px; } 
.Friend .Name{ line-height: 80px; }
.Friend .Picture{ line-height: 80px; width: 80px; height: 80px; }