JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<section class="section-1 container-fluid" id="section-1">
    <div class="row">
        <div class="col-xs-12 col-md-4 col-md-offset-2 left">
             <h1>Title words.</h1>

             <h2>Lots of subtitle words. There is practically a full paragraph of words here. They never stop! Look at all these amazing words. Words, words, words... everywhere.</h2>

        </div>
        <div class="col-xs-12 col-md-6 right">
            <img src="http://frankfortecig.com/wp-content/uploads/2014/07/placeholder-Copy-2.gif">
        </div>
    </div>
</section>

CSS

#section-1 {
    background-color: #0099cc;
    color: #fff;
    height: 0;
    padding-bottom: 56.25%;
}