JSFiddle - React, Tailwind, and code Playground

by moshfeu

HTML

<body>
  <div class="row flex-container">
    <div class="col-sm-3" style="margin:5px">
      <label>Label 1</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 2</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 3</label>
    </div>
    <hr />
    <div class="col-sm-3" style="margin:5px">
      <label>Label 5</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 6</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 7</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 8</label>
    </div>
  </div>
</body>

CSS

.flex-item {
  margin: 4px;
  flex: 0 1 calc(25% - 8px); 
}
    .flex-container {
  width: inherit;
  display: flex;
  flex-flow: row wrap;
  position: relative;
}
    .flex-container hr {
        width: 100%;
  padding: 0%;
  margin: 0%;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 2px;
  border: none;
  background-color: #000;
}