JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="container">
   <div >
      <div >
         <div class="wrap">
            <h3>Деньги</h3>
            <input type="number" id="oneType" step=100 min=1000 max=999999 value="100000" oninput="document.getElementById('rangeType').value = this.value;costCalculator();" /> 
            
            <!-- Бегунок -->
            <input id="rangeType" type="range" step=100 min=1000 max=999999 value="100000" oninput="document.getElementById('oneType').value = this.value;costCalculator();">
            
                        <hr>
            <strong>Сумма <span id="oneRezult">0</span> <span class="rub">&#8381;</span> </strong>
            <hr>
            <h3>Срок кредита</h3>
            <input type="number" id="twoType" min=5 max=365 value="5" oninput="document.getElementById('rangeType2').value = this.value;costCalculator();" /> 
           
           <!-- Бегунок -->
            <input id="rangeType2" type="range" min=5 max=365 value="5" oninput="document.getElementById('twoType').value = this.value;costCalculator()">
          
            <br><br>
            <strong>Срок итого <span id="twoRezult">0</span> <span class="rub">дней </span> </strong>
            <br><br>
            <p class="result text-center">Деньги*Срок= <span id="result">0</span> <span class="rub">&#8381;</span><br><br></p>
         </div>
      </div>
   </div>
</div>
<script>
   function costCalculator() { 
   //Типы выбора
   var oneType = document.getElementById("oneType");
   var twoType = document.getElementById("twoType");
   //Результаты выбора
   var result = document.getElementById("oneType");
   var result = document.getElementById("twoType");
   //Общий результат
   var result = document.getElementById("result");
   //Цена для выбора по умолчанию
   var onePrice = 0;
   var twoPrice = 0;
   //Общая цена
   var price = 0;
   //Умножаем значение на *ЧИСЛО
   onePrice...

CSS

.wrap {
        width: 400px;
    }
h1 {text-align: center;}    
table td {padding: 20px;}
.info {color: gray;font-size: 10px;}    
    
select#oneType {
margin:5px 0 8px 0;
}
.dateTime {
font-weight:bold;
}
hr {
margin:10px;
}
#oneRezult,
#twoRezult,
#twoRezult1,
#threeRezult,
#fourRezult,    
#result {
font-weight:bold;
color:Red;
text-align: right;    
}
.zakaz {
margin-top:20px;
}
.rub {
color:green;
}
.result {
font-weight:bold;
font-size:28px;
}