JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="wrapper">
		<div class="form">
			<input type="number" class="val one" min="1" max="9" onchange="">
			<div class="plus">
				+
			</div>
			<input type="number" min="1" max="9" class="val two">
			<div class="plus">
				=
			</div>
			<div class="question" id="question" onclick="question.style.display = 'none';
			result.style.display = 'block' ;">
				?
			</div>
			<input type="number" class="val result" id="result">
		</div>
	</div>
</body>

CSS

body {
	padding: 0;
	margin: 0;
}


#wrapper {
	width: 100%;
	padding-top: 100px;
}

.val {
	display: block;
	margin: 0 auto;
	width: 40px;
	height: 40px;
	float: left;
	font-size: 27px;
	text-align: center;
}

.plus {
	margin: 0 auto;
	text-align: center;
	width: 40px;
	height: 40px;
	float: left;
	padding-top: 9px;
	font-weight: bold;
	font-size: 27px;
}

.form {
	width: 300px;
	margin: 0 auto;

}

#question {
	width: 46px;
	height: 46px;
	float: left;
	padding: 8px 1px 1px 1px;
	text-align: center;
	box-sizing: border-box;
	font-size: 27px;
}

#result {
	display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.clearfix::after {
    content: " ";
    display: table;
    clear: both;
    float: left;
}

JavaScript

window.onload = function() {
var question = document.getElementById("question");
var result = document.getElementById("result");
var numOne = document.getElementsByClassName("val")[0];
var valOne = numOne.value;

}