JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Grid System Demo</h1>

<div class="row">
    <div class="col-md-6">Label</div>
    <div class="col-md-1"><button>+</button></div>
    <div class="col-md-4"><input type="text" /></div>
    <div class="col-md-1"><button>-</button></div>
</div>

CSS

*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    outline: none; }

.row:after {
    content: '';
    display: block;
    clear: both;
}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col-md-1 {
    width: 8.33333333%;
}

.col-md-2 {
    width: 16.66666666666667%;
}

.col-md-3 {
    width: 25%;
}

.col-md-4 {
    width: 33.33333333333333%;
}

.col-md-5 {
    width: 41.66666666666667%;
}

.col-md-6 {
    width: 50%;
}

.col-md-7 {
    width: 58.33333333333333%;
}

.col-md-8 {
    width: 66.66666666666667%;
}

.col-md-9 {
    width: 75%;
}

.col-md-10 {
    width: 83.33333333333333%;
}

.col-md-11 {
    width: 91.66666666666667%;
}

.col-md-12 {
    width: 100%;
}