JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outercontain">
	<div id="titlerow"><div class="title height">RANK</div><div class="title height">PLAYER</div><div class="title height">SCORE</div><div class="title height">COUNT</div><div class="title height">AVERAGE</div>
    </div>

<div id="rank">
<div class="ranknumber height">1.</div>
<div class="ranknumber height">2.</div>
<div class="ranknumber height">3.</div>
<div class="ranknumber height">4.</div>
<div class="ranknumber height">5.</div>

</div><div id="innercontain">
	<div class="row">
      <div class="player height">Player1</div><div class="score height">310</div><div class="count height">3</div><div class="average height"></div>
	</div>
	<div class="row">
      <div class="player height">Player2</div><div class="score height">458</div><div class="count height">3</div><div class="average height"></div>
	</div>
	<div class="row">
      <div class="player height">Player3</div><div class="score height">423</div><div class="count height">3</div><div class="average height"></div>
	</div>
	<div class="row">
      <div class="player height">Player4</div><div class="score height">985</div><div class="count height">3</div><div class="average height"></div>
	</div>
	<div class="row">
      <div class="player height">Player5</div><div class="score height">567</div><div class="count height">3</div><div class="average height"></div>
	</div>

</div>
</div>

CSS

#outercontain {
	width: 600px;
	height: auto;
	background-color: #f2f2f2;
	text-align: center;
}

#innercontain {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width:90%;
}

#rank {
	position: relative;
	display: inline-block;
	width: 10%;
}

#titlerow, .row, .ranknumber {
	border-bottom: 1px solid #000;
}

.title {
	position: relative;
	display: inline-block;
	width: 22.5%;
}

.title:first-child {
	width: 10%;
}

.player, .count, .score, .average {
	position: relative;
	display: inline-block;
	width: 25%;
}

.height {height:100%;max-height:45px;line-height:45px;}


.row:nth-child(1), .ranknumber:nth-child(1) {
  background: gold;
}

.row:nth-child(2), .ranknumber:nth-child(2) {
  background: #c0c0c0;
}

.row:nth-child(3), .ranknumber:nth-child(3) {
  background: #cd7f32;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  let elements = []
  let container = document.querySelector('#innercontain')
  // Add each row to the array
  container.querySelectorAll('.row').forEach(el => elements.push(el))
  // Clear the container
  container.innerHTML = ''
  // Sort the array from highest to lowest
  elements.sort((a, b) => b.querySelector('.score').textContent - a.querySelector('.score').textContent)
  // Put the elements back into the container
  elements.forEach(e => container.appendChild(e))
})