JSFiddle - React, Tailwind, and code Playground

by Bruno Alla

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row"><div class="col-xs-9">
<ul class="list-inline">
    <li class="speaker-result">
        <i class="fa fa-plus-square fa-2x pull-right"></i>

        <img src="http://m.c.lnkd.licdn.com/mpr/mprx/0_RSNOtCMLttJSwn6AU2X3t3wvY1g7WK9AMu8TthWzT9Wxnq3lBwk-p8jRKgjKoBcjVmnhgbRENxWA" alt="Crispin Nieboer's profile picture" class="profile-picture" onerror="this.src='/static/images/noprofile-pic-lrg.jpg'">
        <p>Crispin Nieboer</p>
        <p><a href="#" class="btn btn-primary btn-xs">More information</a>
        </p>
    </li>
</ul>
    </div>
    <div class="col-xs-3">
        This should be fixed
    <div>
    </div>

CSS

.speaker-result {
    position: relative;
    border: 2px solid red;
    text-align: center;
    width: 120px;
}
.speaker-result i {
    position: absolute;
    top: 0px;
    right: 0px;
}