<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="votes col-xs-2 col-sm-2"> <span class="fa fa-thumbs-up fa-2x"></span> <p class="voteScore">18</p> <span class="fa fa-thumbs-down fa-2x"></span> </div> <div class="info col-xs-8 col-sm-7"> Event Title <div class="visible-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elitero..</div> <div class="hidden-xs"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#location" aria-controls="location" role="tab" data-toggle="tab">Location</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="location">Location</div> <div role="tabpanel" class="tab-pane" id="profile"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mattis feugiat sem, eu sagittis libero. Duis non odio ut nibh volutpat tempus eget interdum elit. </div> </div> </div> </div> </div>

body { padding:0; margin:0; font-size:28px; } .votes { position: relative; margin-top: 10px; font-size: 0.4em; } .voteScore { font-size: 1.3em; margin-top: 4px; margin-bottom: 3px; margin-left: 2px; } .info { float:left; }