JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="question-instructions">
            <div class="row text-center">
                <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 ">
                     <h2>MY TITLE</h2>
                 </div>
            </div>
            <div class="row question-line">
                <div class="col-lg-4 col-md-4 col-sm-4 question-block block1">
                    <div class="pull-left"><i class="fa fa-group fa-fw fa-3x question-icon"></i>
                    </div>
                        <h4>My first text</h4>
                </div>

                <div class="col-lg-4 col-md-4 col-sm-4 question-block block2">
                    <a class="pull-left" href="#">
                        <i class="fa fa-question fa-fw fa-3x question-icon"></i>
                    </a>
                    <h4 class="">My second text</h4>
                </div>

                <div class="col-lg-4 col-md-4 col-sm-4 question-block block3">
                    <div class="pull-left"><i class="fa fa-graduation-cap fa-fw fa-3x question-icon"></i>
                    </div>
                    <h4>My third text</h4>
                </div>
            </div>
       </div>
   </div>

CSS

.question-instructions {
 background-color: #3eb6a9;
 margin: 0px 0px 0px;
}

.question-line {
 margin: 0px auto;
 white-space: nowrap;
 text-align: left;
}

.question-block {
 margin: 10px 0 30px;
 align-content: center;
 vertical-align: middle;
}
.question-block h4{
  display: inline-block;
}
.block {
 float: left;
}