Visualize a math problem presented on a website. I want to showcase the math problem and allow users to input their answer beside it. I am working on setting up the structure for this feature. I have unique buttons that will modify the text of the answer.
The math problem is defined as "problemtext" and the solution is identified as "problemanswer". As users tap on the number pad, the entered number should appear in the "problemanswer" section.
An issue with the current setup is that the response is appearing below the question.
What I desire is to have the answer directly adjacent to the problem, not beneath it. Additionally, I would like the answer to be enclosed in a box or bordered element. How can I achieve this? What changes are required in my html/css structure?
<div id="problem" class="text" style="display:none">
<div id="problemoverall" align="center">
<div id="problemtext" style="font: bold 65px Arial;">
</div>
<div id="problemanswer" style="font: bold 65px Arial;">
</div>
</div>
</div>
Below contains some pertinent CSS code used:
.text {
text-align:center;
font-size:16px;
line-height: 165%;
color:#f1f1f1;
}
.text p {
margin: 8px 0;
}