JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
  <div class="row" style="border: 1px solid #000">
    <div class="col-xs-2 col_wrap" id="p1">Col One</div>
    <div class="col-xs-2 col_wrap" id="p2">Col Two</div>
    <div class="col-xs-2 col_wrap" id="p3">Col Three Three</div>
    <div class="col-xs-2 col_wrap" id="p4">Col Four</div>
    <div class="col-xs-2 col_wrap" id="p5">Col Five</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Six</div>
    <div class="col-xs-2 col_wrap" id="p6">Col seven</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Eight</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Nine</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Ten</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Eleven</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Twelve</div>
      <div class="col-xs-2 col_wrap" id="p6">Col Thirteen</div>
        <div class="col-xs-2 col_wrap" id="p6">Col Fourteen</div>
        <div class="col-xs-2 col_wrap" id="p6">Col Fifteen</div>
  </div>
</div>

CSS

.col-xs-2 {
  background: red;
  color: #FFF;
  width:16%;
  margin-right:10px;
  margin-left:10px;
  margin-bottom:15px;
  height:100%;
}
.row{
  display: flex;
  flex-wrap: wrap;
}