JSFiddle - React, Tailwind, and code Playground

HTML

<div class="testWrapper">
    <div class="test" data-percentage="30"></div>
    <div class="test" data-percentage="62"></div>
    <div class="test" data-percentage="11"></div>
    <div class="test" data-percentage="43"></div>
</div>

CSS

div[data-percentage] {
    font-family: sans-serif;
    background: teal;
    padding: 10px;
    font-weight: bold;
    color: #023636;
    text-shadow: 0 1px 0 #58BBBB;
    font-size: 20px;
    width: 100px;
    margin: 4px auto;
    text-align: center;
}

div[data-percentage]:before {
    content: attr(data-percentage);
}

JavaScript

var $wrapper = $('.testWrapper');

$wrapper.find('.test').sort(function (a, b) {
    return +a.dataset.percentage - +b.dataset.percentage;
})
.appendTo( $wrapper );