JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="control-group">
  <label class="control-label">STUFF<span class="theme-color input-required">*</span></label>
  <div class="controls">
    <div class="control-box-container">

    </div>
    <div class="control-box" data-boxcolor="green">Test line <br>Test line <br>Test line <br></div>
    <div class="control-box">Test line <br>Test line <br>Test line <br></div>
    <div class="control-box" data-boxcolor="red">Test line <br>Test line <br>Test line <br></div>
    <div class="control-box">Test line <br>Test line <br>Test line <br></div>
    <div class="control-box" data-boxcolor="green">Test line <br>Test line <br>Test line <br></div>
    <div class="control-box" data-boxcolor="red">Test line <br>Test line <br>Test line <br></div>
    <div class="control-box" data-boxcolor="orange">Test line <br>Test line <br>Test line <br></div>
    <div class="control-box" data-boxcolor="">Test line <br>Test line <br>Test line <br></div>
  </div>
</div>
</div>

CSS

control-group {
  position: relative;
  margin-bottom: 0.4em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.control-group .control-label {
  padding: 0.8em 0 0 0;
  width: auto;
  margin: 0;
  position: relative;
  line-height: normal;
  flex: 0 0 30%;
}

.control-group > .controls {
  margin: 0 1em 0 1.2em;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0);
}

.control-group .controls {
  background: rgb(250, 250, 250);
  border: 1px solid rgb(207, 207, 207);
  border-radius: 2px;
  padding: 0.3em 0 0 0.3em;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* Copntrol box */

.control-box-container {
  
  
}

.control-box {
  display: flex;
  flex: 1 1 auto;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin: 0 0.25em 0.25em 0;
  min-height: 55px;
  padding: 0.25em;
}

.control-box[data-boxcolor="green"] {
  border-color: green;
}

.control-box[data-boxcolor="red"] {
  border-color: red;
}

.control-box[data-boxcolor="blue"] {
  border-color: blue;
}

.control-box[data-boxcolor="orange"] {
  border-color: orange;
}