<h1>(a * b) + c = d</h1>

<form oninput="result.value=(parseInt(a.value)*parseInt(b.value))+parseInt(c.value)">
  <div>(<input type="number" id="a" name="a" value="10" /><span>*</span></div>
  <div><input type="range" step="1" min="1" max="10" id="b" name="b" value="1" />)<span>+</span></div>
  <div><input type="number" id="c" name="c" value="10" /><span>=</span></div>
  <div><output name="result" for="a b c">20</output></div>
</form>


*{font-family: arial}

body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
}

form {
  max-width: 500px;
  padding: 20px;
  box-shadow: 0px 0px 16px 4px rgba(0,0,0,0.1)
}

fieldset {
  margin: 0 0 30px 0;
  border: 1px solid #ccc;
}

legend {
  background: #eee;
  padding: 4px 10px;
  color: #000;
  margin: 0 auto;
  display: block;
}
.inputWrap {
  margin: 0 0 12px 0;
  width: 100%;
}

div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

div span {
  width: 20px;
  text-align: center;
}


input {
  padding: 4px 10px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

output {
  background: green;
  padding: 10px;
  margin: 10px auto 0 auto;
  color: #fff;
  display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.