JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calc">
<div id="sum">A + B = </div>
<input type="number" placeholder="A" id="a"/>
<input type="number" placeholder="B" id="b"/>
</div>

CSS

.calc {
  display: flex;
  flex-direction: column;
  height: 4rem;
  width: 20rem;
}

#sum {
  flex: 1 0;
  background-color: yellow;
}

JavaScript

let state = {
  a: 0,
  b: 0
}

function changestate(action) {
  state = {...state}
  
  switch(action.type) {
    case 'add_a':
      state.a = action.value
      break
    case 'add_b':
      state.b = action.value
      break
    default:
  }
}

let rtk = new Proxy({}, {
	get(none, key) {
  	return state[key];
  },
  set(none, key, value) {
  	changestate({ type: "add_"+key, value });
  }
});

document.addEventListener("DOMContentLoaded", () => {

const aEl = document.getElementById('a')
const bEl = document.getElementById('b')

if (!aEl || !bEl) {
  return;
}


aEl.addEventListener('input', (ev) => {
	rtk.a = Number(ev.target.value);
  updateUI()
})

bEl.addEventListener('input', (ev) => {
	rtk.b = Number(ev.target.value);
  updateUI()
})


updateUI()

})




function updateUI() {
  const sumEl = document.getElementById('sum')
  if (!sumEl) {
    return
  }

  sumEl.innerHTML = `A + B = ${rtk.a + rtk.b}`
}