JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<section id="browse" class="browse">
    <div class="container">
        <div class="row">
            <div class="col-md-5 col-sm-5 textContainer">
                <h2 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h2>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-6 col-sm-7 animation_container">
                <img id="animation_img1" class="animation_img animation_img1" src="http://lorempixel.com/output/abstract-h-c-309-483-3.jpg"/>
            </div>
        </div>
    </div>
</section>

CSS

.browse .container, .blind_dating .container { padding-bottom: 0; }
.animation_container { position: relative; }
.browse .animation_container { height: 430px; }
.animation_img { position: absolute; bottom: 0; }
.animation_img1 { right: 25%; }
.animation_img2 { right: 25%; }


/* New classes */
.browse .textContainer { 
    height: 430px; 
    line-height: 400px;
}

.textContainer h2 {
    vertical-align: middle;
    display: inline-block;
}

JavaScript

7