<!DOCTYPE html>
<html>
<head>
 <meta charset = "utf-8">
</head>
<style>
*{
box-sizing: border-box;
}
body {

}
li:not(:last-child) {
   border-bottom: 1px dotter #ddd;
}
li{
list-style-type: none;
}
.container{
display: flex;
justify-content: space-between;
border: 1px solid #eee;
width: 1280px;
margin: 0 auto;
}

.driver-table{
display: flex;
flex-direction: column;

}

.driver-place-race{
width: 50px;
text-align: center;
}

.place-race{
height: 30px;
font-size: 17px;
border: 1px solid #eee;
background-color: white;
padding-top: 5px;
margin-top: 5px;
margin-left: 5px;
}

.player{
display: flex;
width: 400px;
height: 30px;
margin-top: 5px;
margin-right: 66px;
}

.driver{
width: 350px;
font-size: 17px;
border: 1px solid #eee;
background-color: white;
padding-top: 4px;
padding-left: 7px;
}

.point{
width: 50px;
text-align: center;
font-size: 17px;
border: 1px solid #eee;
background-color: white;
padding-top: 4px;
margin-left: 5px;
}

.point-race{
width: 50px;
height: 30px;
text-align: center;
font-size: 17px;
font-weight: bold;
border: 1px solid #eee;
background-color: white;
margin-top: 5px;
padding-top: 4px;
}

.driver-point-race{
display: flex;
flex-direction: column;
margin-right: 700px;
}



.btn{
margin-left: 900px;
margin-bottom: 10px;
font-size: 18px;
width: 70px;
margin-top: 20px;
border: 1px solid #eee;
border-radius: 7px;
}

</style>
<body>


<div class="container">

<div class="driver-place-race">
     <div class="place-race">1</div>
     <div class="place-race">2</div>
     <div class="place-race">3</div>
     <div class="place-race">4</div>
     <div class="place-race">5</div>
</div> 

  <div class="driver-table"> 
    <li><div class="player"><div  class="driver">Максим</div><div id="d1" class="point">0</div></div></li>
    <li><div class="player"><div  class="driver">Лева</div><div id="d2" class="point">0</div></div></li>
    <li><div class="player"><div  class="driver">Валера</div><div id="d3" class="point">0</div></div></li>
    <li><div class="player"><div  class="driver">Сергей</div><div id="d4" class="point">0</div></div></li>
    <li><div class="player"><div  class="driver">Карл</div><div id="d5" class="point">0</div></div></li>
  </div>

<div class="driver-point-race">
     <div class="point-race">10</div>
     <div class="point-race">8</div>
     <div class="point-race">5</div>
     <div class="point-race">3</div>
     <div class="point-race">1</div>
</div> 


   
</div>
<button class="btn" onclick="sort()">Старт</button>






 



 
body {
  background-color: #a3d5d3;
}
console.clear();

function sort() {


  let dr1 = document.getElementById('d1');
let max = 100;
        var side1 = Math.floor( Math.random() * 2000 ) + 1;   
        
        var diceTotal = side1 + max;
d1.innerHTML = diceTotal;

let dr2 = document.getElementById('d2');
let lew = 95;
        var side2 = Math.floor( Math.random() * 2000 ) + 1;   
  
         var diceTotal2 = side2  + lew;
d2.innerHTML = diceTotal2;

let dr3 = document.getElementById('d3');
let val = 90;
        var side3 = Math.floor( Math.random() * 2000 ) + 1;   
        
         var diceTotal3 = side3 +  val;

d3.innerHTML = diceTotal3

let dr4 = document.getElementById('d4');
let ser = 85;
        var side4 = Math.floor( Math.random() * 2000 ) + 1;   
       
         var diceTotal4 = side4  + ser;
d4.innerHTML = diceTotal4;

let dr5 = document.getElementById('d5');
let karl = 80;
        var side5 = Math.floor( Math.random() * 2000 ) + 1;   
       
         var diceTotal5 = side5 + karl;

d5.innerHTML = diceTotal5

  var nodeList = document.querySelectorAll('li');
  var itemsArray = [];
  var parent = nodeList[0].parentNode;
  for (var i = 0; i < nodeList.length; i++) {    
    itemsArray.push(parent.removeChild(nodeList[i]));
  }
  itemsArray.sort(function(nodeA, nodeB) {
      var textA = nodeA.querySelector('div:nth-child(2)').textContent;
      var textB = nodeB.querySelector('div:nth-child(2)').textContent;
      var numberA = parseInt(textA);
      var numberB = parseInt(textB);
      if (numberA < numberB) return 1;
      if (numberA > numberB) return -1;
      return 0;
    })
    .forEach(function(node) {
      parent.appendChild(node)
    });


}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.