<div class="container">
  <div class="loan-calculator">
    <div class="loan-calculator__controls-result-wrapper">
      <div class="loan-calculator__controls-list">
        <div class="loan-calculator__control loan-calculator-control">
          <span class="loan-calculator-control__caption">No. of Tokens Used / Day: <b><span data-money-range-value>0</span></b></span>
          <div class="loan-calculator-control__range loan-calculator-range-slider loan-calculator-range-slider--money" data-money-range-slider></div>
          <div class="loan-calculator-control__help-values">
            <div class="loan-calculator-control__min-value">0</div>
            <div class="loan-calculator-control__max-value">100,000,000</div>
          </div>
        </div>
        <div class="loan-calculator__control loan-calculator-control">
          <span class="loan-calculator-control__caption">Expected Cache Hit Rate: <b><span data-months-range-value>0</span> <span data-months-range-measure>%</span></b></span>
          <div class="loan-calculator-control__range loan-calculator-range-slider loan-calculator-range-slider--months" data-months-range-slider></div>
          <div class="loan-calculator-control__help-values">
            <div class="loan-calculator-control__min-value">0%</div>
            <div class="loan-calculator-control__max-value">100%</div>
          </div>
        </div>
      </div>
      <div>
        <div class="loan-calculator__result loan-calculator-result">
          <span class="loan-calculator-result__caption">Money Saved / Month</span>
          <b class="loan-calculator-result__value">$ <span data-result-value>45,000</span></b>
        </div>
        <br />
        <p class="loan-calculator__footnote"><small>Calculated based on GPT4 pricing as of 8th July. For simplicity, we have averaged the token cost to $0.045 for this calculation.</small></p>
      </div>
    </div>
  </div>
</div>
</div>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  font-family: "Inter", sans-serif;
  background-color: #ffffff;
  overflow-x: hidden;
  //  overflow-y: hidden;
}

.container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

/* Existing CSS */

/* ... */

/* Responsive CSS */

@media screen and (max-width: 768px) {
  .loan-calculator-control__caption {
    font-size: 16px;
  }

  .loan-calculator-result__value {
    font-size: calc(24 / 20 * 1em);
  }

  .loan-calculator-result__caption,
  .loan-calculator__footnote {
    font-size: 14px;
  }

  .loan-calculator-control__min-value,
  .loan-calculator-control__max-value {
    font-size: 10px;
  }
}

.loan-calculator__controls-result-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* align items to the start of the container */
  margin-bottom: 32px;
  gap: 20px; /* add some gap between the children */
}
.loan-calculator__controls-result-wrapper > * {
  flex: 1 1 50%; /* make each child take up half the width of the container */
}

.loan-calculator__controls-result-wrapper > :first-child {
  flex: 1.8 1 0; /* this selects the first child, which is the left column */
}

.loan-calculator__controls-result-wrapper > :last-child {
  flex: 1 1 0; /* this selects the last child, which is the right column */
}

// loan-calculator-range-slider
.loan-calculator-range-slider {
  height: 4px;
  background-color: #e8e8e8;
  border: none;

  .noUi-handle {
    right: -8px !important;
    width: 16px;
    height: 16px;
    box-shadow: none;
    border: 2px solid #888888;
    border-radius: 50%;
    outline: none;
    box-sizing: border-box;

    &::before,
    &::after {
      content: none;
    }
    &::active {
      width: 30px;
      height: 30px;
      top: -7px; /* Adjust these values as necessary */
      left: -7px;
    }
  }

  &--money {
    .noUi-connect {
      background-color: #147ba8;
    }

    .noUi-handle {
      border-color: #147ba8;
    }
  }

  &--months {
    .noUi-connect {
      background-color: #ff0000;
    }
    .noUi-handle {
      border-color: #ff0000;
    }
  }
}

.loan-calculator-result {
  font-size: 18px;
  line-height: 1.25;
}

.loan-calculator-result__caption {
  display: block;
}

.loan-calculator-result__value {
  display: inline-block;
  font-size: calc(30 / 20 * 1em);

  &::after {
    display: inline-block;
    margin-left: 8px;
    vertical-align: top;
    font-size: 16px;
    color: #ff5555;
  }
}

.loan-calculator {
  max-width: 700px;
  padding: 28px;
  background-color: #ffffff;
  //box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  border-radius: 0px;
}

.loan-calculator__controls-list {
  margin-bottom: 32px;
  margin-right: 32px;

  & > :last-child {
    margin-bottom: 0;
  }
}

.loan-calculator__control {
  margin-bottom: 24px;
}

// loan-calculator-control
.loan-calculator-control {
}

.loan-calculator-control__caption {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: calc(22 / 18);
}

.loan-calculator-control__range {
  margin-top: 12px;
  margin-bottom: 12px;
}

.loan-calculator-control__help-values {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 12px;
  user-select: none;
}

.loan-calculator-control__min-value {
  font-size: 12px;
  color: #9e9da0;
}

.loan-calculator-control__max-value {
  font-size: 12px;
  color: #9e9da0;
}

.loan-calculator__result {
  margin-bottom: 0;
}

.loan-calculator__footnote {
  margin: 0;
  color: #6f6f6f;

  &::before {
    display: inline-block;
    margin-right: 8px;
    vertical-align: top;
    font-size: 14px;
    color: #ff5555;
  }
}
View Compiled
var numberFormatter = new Intl.NumberFormat("en", {
  style: "decimal",
  minimumFractionDigits: 0,
  maximumFractionDigits: 0
});

var resultFormatter = new Intl.NumberFormat("en", {
  style: "decimal",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

function wordForm(num, word) {
  cases = [2, 0, 1, 1, 1, 2];
  return word[
    num % 100 > 4 && num % 100 < 20 ? 2 : cases[num % 10 < 5 ? num % 10 : 5]
  ];
}

var moneyRangeSliderElem = document.querySelector("[data-money-range-slider]");
var moneyRangevalueElem = document.querySelector("[data-money-range-value]");

var monthsRangeSliderElem = document.querySelector(
  "[data-months-range-slider]"
);
var monthsRangeValueElem = document.querySelector("[data-months-range-value]");
var monthsRangeMeasureElem = document.querySelector(
  "[data-months-range-measure]"
);

var resultValueElem = document.querySelector("[data-result-value]");

noUiSlider.create(moneyRangeSliderElem, {
  start: [10000000],
  step: 500000,
  connect: [true, false],
  format: wNumb({
    decimals: 0
  }),
  range: {
    min: 0,
    max: 100000000
  }
});

noUiSlider.create(monthsRangeSliderElem, {
  start: [20],
  step: 1,
  connect: [true, false],
  format: wNumb({
    decimals: 0
  }),
  range: {
    min: 0,
    max: 100
  }
});

function calcPayment() {
  var moneyValue = parseInt(moneyRangeSliderElem.noUiSlider.get(), 10);
  var monthsValue = parseInt(monthsRangeSliderElem.noUiSlider.get(), 10);

  var result = (moneyValue / 1000) * (monthsValue / 100) * 0.045 * 30;

  resultValueElem.textContent = resultFormatter.format(result);
}

moneyRangeSliderElem.noUiSlider.on("update", function (values, handle) {
  moneyRangevalueElem.textContent = numberFormatter.format(values[handle]);

  calcPayment();
});

monthsRangeSliderElem.noUiSlider.on("update", function (values, handle) {
  monthsRangeValueElem.textContent = values[handle];
  monthsRangeMeasureElem.textContent = wordForm(values[handle], [
    "%",
    "%",
    "%"
  ]);

  calcPayment();
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js