JSFiddle - React, Tailwind, and code Playground
HTML
<div class="grid__row grid__row--md">
<div class="grid__item-flex">
<div class="grid__row grid__row-md parent">
<div class="grid__item-flex checkinput"><input type="checkbox"><label>Test Column 1</label></div>
<div class="grid__row grid__row--md">
<div class="grid__item-flex">
<div class="grid__row grid__row-md parent">
<div class="grid__item-flex checkinput"><input type="checkbox"><label>Column Item</label></div>
</div>
</div>
</div>
<div class="grid__row grid__row--md">
<div class="grid__item-flex ">
<div class="grid__row grid__row-md parent">
<div class="grid__item-flex checkinput"><input type="checkbox"><label>Column Item</label></div>
</div>
</div>
</div>
<div class="grid__row grid__row--md">
<div class="grid__item-flex ">
<div class="grid__row grid__row-md parent">
<div class="grid__item-flex checkinput"><input type="checkbox">
<label>Column Item</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item-flex">
<div class="grid__row grid__row-md parent">
<div class="grid__item-flex checkinput"><input type="checkbox"><label>Test Column 2</label></div>
<div class="grid__row grid__row--md">
<div class="grid__item-flex">
<div class="grid__row grid__row-md child parent">
<div class="grid__item-flex checkinput"><input type="checkbox"><label>Column Item</label>
</div>
</div>
</div>
</div>
<div class="grid__row grid__row--md">
<div class="grid__item-flex ">
<div class="grid__row grid__row-md parent">
<div class="grid__item-flex checkinput"><input type="checkbox"><label>Column Item</label>
</div>
</div>
</div>
...
CSS
/*********************************************/
/**** SUSPECT FLEXBOX BREAKING CODE IN IE ****/
/*********************************************/
.grid__row {
display: flex;
flex-direction: row;
}
.grid__row .grid__row {
margin: 0px 0px 0px 15px;
}
.grid__row-overflow {
flex: 1 1;
}
.grid__row .order-group {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.grid__item {
flex: 1;
padding: 0px;
}
.grid__item-flex {
display: flex;
flex: 0 1 auto;
padding-top: 1px;
}
.grid__item-flex:only-child {
flex: 1 1 auto;
}
.parent {
flex-direction: column;
display: flex;
margin-bottom: 20px;
}
.order-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/*********************************************/
/*********************************************/
/*********************************************/