JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
    <div class="column">
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 1</div>
    </div>
    <div class="column">
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 2</div>
    </div>
    <div class="column">
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 3</div>
    </div>
    <div class="column">
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 4</div>
    </div>
    <div class="column">
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 5</div>
    </div>
    <div class="column">
        <div class="cell">Cell Data 6</div>
        <div class="cell">Cell Data 6</div>
        <div class="cell">Cell Data 6</div>
        <div class="cell">Cell Data 6</div>
        <div class="cell">Cell Data 6</div>
        <div...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-text-stroke: 0.35px;
    color: #484848;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration: none;
    /* for images */
    outline: none;
}
.table {
    display: table;
    font-family:"HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    margin-top: 100px;
}
.column {
    display: table-cell;
}
.cell {
    display: table-colgroup;
    padding: 10px;
    border: 1px solid #000;
    border-right: none;
    border-bottom: none;
}
.column:last-child .cell {
    border-right: 1px solid #000;
}
.column .cell:last-child {
    border-bottom: 1px solid #000;
}

JavaScript

$(".table").sortable({
    axis: "x",
    cancel: '.column > .cell:not(:first-child)'
});

$('.table > .column > .cell:nth-child(3)').css('background', 'pink');