JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<script>
  let fst = document.getElementById('idinp').value;
let scnd = document.getElementById('select').value;
let thrd = document.getElementById('idinp2').value;

  function changeHandler() {
 	if (scnd == '+') {
 		var result = fst + thrd;
 		document.getElementById('idresult').innerHTML = result
 	}

 	else if (scnd == '-') {
 		var result = fst - thrd;
 		document.getElementById('idresult').innerHTML = result
 	}

 	else if (scnd == '*') {
 		var result = fst * thrd;
 		document.getElementById('idresult').innerHTML = result
 	}

 	else{
 		var result = fst / thrd;
 		document.getElementById('idresult').innerHTML = parseInt(result)
 	}
}

  </script>
  <div class="container">
		
		<div class="input-div">
			<p class="p">Первое значение:</p>
			<input id="idinp" class="inp1">
		</div>


		<div class="input-div" id="select-div">
			<p class="p">Операция:</p>
			<select class="select inp" id="select">
				<option id="idplus" class="inp">+</option>
				<option id="idminus" class="inp">-</option>
				<option id="idmult" class="inp">*</option>
				<option id="iddiv" class="inp">/</option>
			</select>

		</div>

		<div class="input-div" id="input2-div">
			<p class="p">Второе значение:</p>
			<input id="idinp2" class="inp1" onChange="changeHandler">
		</div>

		<div class="input-div" id="output-div">
			<p class="p">Результат:</p>
			<input id="idresult" class="out1 inp1" onChange="changeHandler">
		</div>

	</div>

CSS

.container{
	display: flex;
	margin: 50px auto;
	width: 200px;
	flex-direction: column;
	font-size: 20px;
	line-height: 30px;

}

.input-div{
	margin-top: 20px;
	width: 100%;
}

.inp1{
	width: 200px;
	height: 40px;
	font-size: 20px;
	line-height: 30px;
}

.inp{
	width: 100px;
	height: 30px;
}

.p{
	margin:0;
}