JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="row">
        <div class="sm-cell cell cell-1">1</div>
        <div class="md-cell cell cell-2">2</div>
        <div class="sm-cell cell cell-3">3</div>
        <div class="sm-cell cell cell-4">4</div>
        <div class="sm-cell cell cell-5">5</div>
        <div class="md-cell cell cell-6">6</div>
        <div class="lg-cell cell cell-7">7</div>
    </div>
    
    <div class="clear"></div>
    
    <div class="row">
        <div class="sm-cell cell cell-1">1</div>
        <div class="md-cell cell cell-2">2</div>
        <div class="sm-cell cell cell-3">3</div>
        <div class="sm-cell cell cell-4">4</div>
        <div class="sm-cell cell cell-5">5</div>
        <div class="md-cell cell cell-6">6</div>
        <div class="lg-cell cell cell-7">7</div>
    </div>
    
    <div class="clear"></div>
</div>

<fieldset>
    <legend>toggle columns</legend>
    <div><input type="checkbox" checked="checked"  class="toggle" value="cell-1" /> cell-1</div>
    <div><input type="checkbox" checked="checked"  class="toggle" value="cell-2" /> cell-2</div>
    <div><input type="checkbox" checked="checked"  class="toggle" value="cell-3" /> cell-3</div>
    <div><input type="checkbox" checked="checked"  class="toggle" value="cell-4" /> cell-4</div>
    <div><input type="checkbox" checked="checked"  class="toggle" value="cell-5" /> cell-5</div>
    <div><input type="checkbox" checked="checked"  class="toggle" value="cell-6" /> cell-6</div>
    <div><input type="checkbox" checked="checked" class="toggle" value="cell-7" /> cell-7</div>
</fieldset>

CSS

body {
    font-family: 'Arial';
    font-size: 10px;
}

#container {
    background: #DEDEDE;
}

.clear { clear: both; }

.row {
    margin: 1px 0;
}

.cell {
    float: left;
    text-align: center;
    background: #999999;
    padding: 2px;
    cursor: pointer;
}

.cell:hover {
    background: #666666;
    color: #FFFFFF;
}

.sm-cell { width: 80px; }
.md-cell { width: 160px; }
.lg-cell { width: 240px; }

JavaScript

$(document).ready(function() {
    $('.toggle').on('click', function(e) {
        var el = $(this);
        var cell = el.val();
    
        $('.' + cell).toggle();
    });    
});