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
}

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

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

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


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

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


updateUI()

})


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

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