JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-auto"><div style="background:lightgreen;">Left</div></div>
    <div class="col-xs-auto"><div style="background:lightgreen;">Left 1</div></div>
    <div class="col-xs-auto-right"><div style="background:lightgreen;">Right</div></div>
    <div class="col-middle"><div style="background:yellow;">Middle bla bla bla bla</div></div>
</div>

CSS

.col-xs-auto, .col-xs1-auto, .col-sm-auto, .col-md-auto, .col-lg-auto,
.col-xs-auto-right, .col-xs1-auto-right, .col-sm-auto-right, .col-md-auto-right, .col-lg-auto-right,
.col-middle {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.col-middle {
  display: table;
}

.col-xs-auto {
  float: left;
}
.col-xs-auto-right {
  float: right;
}

@media (min-width: 480px) {
  .col-xs1-auto {
    float: left;
  }
  .col-xs1-auto-right {
    float: right;
  }
}

@media (min-width: 768px) {
  .col-sm-auto {
    float: left;
  }
  .col-sm-auto-right {
    float: right;
  }
}

@media (min-width: 992px) {
  .col-md-auto {
    float: left;
  }
  .col-md-auto-right {
    float: right;
  }
}

@media (min-width: 1200px) {
  .col-lg-auto {
    float: left;
  }
  .col-lg-auto-right {
    float: right;
  }
}