JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">
        <button id="dsc" type="button" name="button">Dsc</button>
        <button id="asc" type="button" name="button">Asc</button>
    </div>
    <div class="wrapper">
        <div class="column">
            <div class="box red"></div>
            <div class="title">
                Product 1
            </div>
            <div class="price">
                <div class="value">
                    15
                </div>
            </div>
        </div>
        <div class="column">
            <div class="box green"></div>
            <div class="title">
                Product 2
            </div>
            <div class="price">
                <div class="value">
                    150
                </div>
            </div>
        </div>
        <div class="column">
            <div class="box blue"></div>
            <div class="title">
                Product 3
            </div>
            <div class="price">
                <div class="value">
                    415
                </div>
            </div>
        </div>
        <div class="column">
            <div class="box pink"></div>
            <div class="title">
                Product 4
            </div>
            <div class="price">
                <div class="value">
                    1100
                </div>
            </div>
        </div>
        <div class="column">
            <div class="box orange"></div>
            <div class="title">
                Product 5
            </div>
            <div class="price">
                <div class="value">

                </div>
            </div>
        </div>
        <div class="column">
            <div class="box black"></div>
            <div class="title">
                Product 6
            </div>
            <div class="price">
                <div class="value">
                    999
                </div>
            </div>
        </div>
    </div>

CSS

.wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.column {
    width: 32%;
    float: left;
    margin-right: 1%;
    text-align: center;
    margin-bottom: 30px;
}
.value {
text-align: center;;
}
.button {
    text-align: center;
    margin-bottom: 30px;
}
body {
    padding: 50px;
}
.box {
  width:150px;
  height:150px;
  display:block;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.orange {
  background-color: orange;
}
.pink {
  background-color: pink;
}
.black {
  background-color: black;
}

JavaScript

(function($) {
            var divs = $("div.column");

            $('#asc').on('click', function () {
                var numericallyOrderedDivs = divs.sort(function (a, b) {
                    return $(a).find("div.value").text() - $(b).find("div.value").text();
                });
                $(".wrapper").html(numericallyOrderedDivs);
            });

            $('#dsc').on('click', function () {
                var numericallyOrderedDivs = divs.sort(function (a, b) {
                    return $(b).find("div.value").text() - $(a).find("div.value").text();
                });
                $(".wrapper").html(numericallyOrderedDivs);
            });

        })(jQuery);