JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.1.1/tinysort.min.js"></script>
<button id="sort-by-firstname">Sort by Firstname</button>
<button id="sort-by-lastname">Sort by Lastname</button>
<button id="sort-by-age">Sort by Age</button>
<div id="content">
    <div id="members">
            <div class="member-info"> <span class="member-fn" data-sort-firstname="Dirk">Dirk</span>
                <span class="member-ln" data-sort-lastname="Abe">Abe</span>
                <span class="member-age" data-sort-age="4">4</span>

            </div>
            <div class="member-info"> <span class="member-fn" data-sort-firstname="Gavin">Gavin</span>
                <span class="member-ln" data-sort-lastname="Ahumada">Ahumada</span>
                <span class="member-age" data-sort-age="1">1</span>

            </div>
            <div class="member-info"> <span class="member-fn" data-sort-firstname="Dusty">Dusty</span>
                <span class="member-ln" data-sort-lastname="Alm">Alm</span>
                <span class="member-age" data-sort-age="6">6</span>
            </div>
            <div class="member-info"> <span class="member-fn" data-sort-firstname="Aron">Aron</span>
                <span class="member-ln" data-sort-lastname="Corbell">Corbell</span>
                <span class="member-age" data-sort-age="20">20</span>

            </div>
            <div class="member-info"> <span class="member-fn" data-sort-firstname="Hans">Hans</span>
                <span class="member-ln" data-sort-lastname="Cork">Cork</span>
                <span class="member-age" data-sort-age="18">18</span>

            </div>
            <div class="member-info"> <span class="member-fn" data-sort-firstname="Doretha">Doretha</span>
                <span class="member-ln" data-sort-lastname="Corley">Corley</span>
                <span class="member-age" data-sort-age="1">1</span>

            </div>
            <div class="member-info"> <span class="member-fn"...

CSS

#members{
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
    
    -webkit-column-rule: 1px outset #ddd; 
    -moz-column-rule: 1px outset #ddd; 
    column-rule: 1px outset #ddd;
}

.member-info{
    width:100%;
    display:table;
    vertical-align:top
}

.member-fn,.member-ln,.member-age{ 
    display:table-cell
}

.member-fn,.member-ln{
    width:42%;
}

JavaScript

var buttons= document.querySelectorAll("button");

[].forEach.call(buttons, function(button){
    button.addEventListener("click",function(){
        var attribute= this.id.replace(/sort-by-/,'');
        tinysort('.member-info',{selector:"[data-sort-"+attribute+"]"});
    });
});