JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="row">
        <div class="name">Player1</div><div class="score">430</div>
    </div>
    
    <div class="row">
        <div class="name">Player2</div><div class="score">580</div>
    </div>
    
    <div class="row">
        <div class="name">Player3</div><div class="score">310</div>
    </div>
    
    <div class="row">
        <div class="name">Player4</div><div class="score">640</div>
    </div>
    
    <div class="row">
        <div class="name">Player5</div><div class="score">495</div>
    </div>
</div>

CSS

#container {
	width: 600px;
	height: auto;
}

.row {
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	border-bottom: 1px solid #AFAFAF;
}

.name {
	position: relative;
	display: inline-block;
	width: 75%;
	line-height: 45px;
}

.score {
	position: relative;
	display: inline-block;
	width: 25%;
}
.highLight{
 background:yellow; 
}

JavaScript

var $divs = $("div.row");
$(document).ready(function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".score").text() > $(b).find(".score").text();
    });
    $("#container").html(numericallyOrderedDivs);    
    
   $("#container").find(".row:eq(0)").addClass("highLight");
   $("#container").find(".row:eq(1)").addClass("highLight") 
   $("#container").find(".row:eq(2)").addClass("highLight");
   
    
    
});