JSFiddle - React, Tailwind, and code Playground

by Wietse De Vries

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/Zertz/bootstrap-horizon/master/bootstrap-horizon.css">
<div clas="container">
  <div class="row row-horizon">
    <div class="col-xs-6">
      <p>This content is very, very, very, very, very, very, very wide!</p>
    </div><div class="col-xs-6">
      <p>This content is very, very, very, very, very, very, very wide!</p>
    </div><div class="col-xs-6">
      <p>This content is very, very, very, very, very, very, very wide!</p>
    </div>
  </div>
</div>

<div class="example">
  <div class="inline-block-element">These has extra space</div>
  <div class="inline-block-element">These has extra space</div>
  <div class="inline-block-element">These has extra space</div>
  <br/><br/>
  <div class="inline-block-element">These don't</div><div class="inline-block-element">These don't</div><div class="inline-block-element">These don't</div>
</div>

CSS

.row-horizon{background-color:red;}
.col-xs-6{background-color:white; height:40px;}


.example {
  background: red;
  margin-top: 60px;
}
.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 30px;
  background: #FFF;
  border: 1px solid yellow;
  font-size: 11px;
}