JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<p>
  <input type="number" id="num1" 
    value="12315" min="1"> first number
</p>
<p>
  <input type="number" id="num2" 
    value="231091" min="1"> second number
</p>
<p>
  <button id="combine">combine</button>
  <button id="unravel">unravel</button>
</p>

<pre id="result"></pre>
</body>
</html>

CSS

input[type=number] {width: 100px;}

JavaScript

(() => {
  document.addEventListener("click", handleStuff);
  // formula: c = (a * (a * b)) + b
  // as long as a * (a * b) < 9007199254740991
  const combine = (a, b) => ({
      a: a, 
      b: b,
      get c() { return this.a * this.b; },
      get combined() { return this.a * this.c + this.b; },
      get unraveled() { return [
        Math.floor(this.combined / this.c), 
        this.combined % this.c ]; }
  });
  const log = txt => document.querySelector("pre").textContent = txt;
  let numbers = combine(
    +document.querySelector("#num1").value, 
    +document.querySelector("#num2").value );

  function handleStuff(evt) {
    if (evt.target.nodeName.toLowerCase() === "button") {
      if (evt.target.id === "combine") {
        numbers = combine(
          +document.querySelector("#num1").value, 
          +document.querySelector("#num2").value );
        if (numbers.combined > Number.MAX_SAFE_INTEGER) {
          log (`${numbers.combined} too large, unraveled will be unreliable`);
        } else {
          log (`Combined ${numbers.a} and ${numbers.b} to ${numbers.combined}`);
        }
      } else {
        log(`${numbers.combined} unraveled to ${numbers.unraveled}`);
      }
    }
  }

})();