JSFiddle - React, Tailwind, and code Playground
HTML
<table cellpadding="0" border="0" width="100%" cellspacing="0">
<tr>
<td style="text-align:left" width="65px"><strong> Color: </strong>
</td>
<td style="float:left; text-align:left; width:100%">
<div class="table">
<div class="table-row">
<div class="table-cell">
<input type="checkbox" class="checkbox" />
<label class="btn"> <span>A</span>
</label>
</div>
<div class="table-cell">
<input type="checkbox" />
<label class="btn"> <span>B</span>
</label>
</div>
<div class="table-cell">
<input type="checkbox" />
<label class="btn"> <span>C</span>
</label>
</div>
<div class="table-cell">
<input type="checkbox" />
<label class="btn"> <span>D</span>
</label>
</div>
<div class="table-cell">
<input type="checkbox" />
<label class="btn"> <span>E</span>
</label>
</div>
<div class="table-cell">
<input type="checkbox" />
<label class="btn"> <span>F</span>
</label>
</div>
<div class="table-cell">
<input type="checkbox" />
<label class="btn"> <span>G</span>
</label>
</div>
<div class="table-cell">
<input type="checkbox" />
<label class="btn"> <span>H</span>
...
CSS
.table {
display: table;
width: 100%;
}
.table-row {
display: table-row;
width: 100%;
}
.table-cell {
display: table-cell;
}
@media screen and (max-width: 479px) {
.table, .table-row {
display: block;
}
.table-cell {
display:inline-block;
}
}