JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
  <div class="col-xs-6 survey-extra">
    <h5>FROM OUR SPONSORS</h5>
    <span class="money-extra">$0.00</span>
  </div>

  <div class="col-xs-6 survey-extra">
    <h5>FREEBIES</h5>
    <span class="money-extra">$0.00</span>
  </div>
</div>
<div class="row">
  <div class="col-xs-6 survey-extra">
    <h5>OTHER</h5>
    <span class="money-extra">$0.00</span>
  </div>

  <div class="col-xs-6 survey-extra">
    <h5>ANOTHER ROW</h5>
    <span class="money-extra">$0.00</span>
  </div>
</div>
</div>

CSS

.survey-extra {
    background: #1e90ff;
    color: #fff;
    width: 45%;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

.survey-extra:nth-of-type(0) {
  float: left;
}

.survey-extra:nth-of-type(1) {
  float: right;
}