Div positioning - putting one after another

Div positioning - putting one after another

Imagine a math problem on the web. I would like to display the math
problem and then have the user be able to type their answer to the right
of it. I am trying to set up the structure. I have custom buttons that I
will use to change the inner text of the answer.
The math problem is given by "problemtext" and the answer is given by
"problemanswer". When the user taps on the number pad, I will place that
number in the "problemanswer" segment.
The problem with this set up is that the answer is showing up below the
problem.

But I want the answer to be directly to the right of the problem, not
below it. Further, I'd like the answer to have a box (or border) around
it. How can I do this?
<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>
Here's some relevant CSS I have
.text {
text-align:center;
font-size:16px;
line-height: 165%;
color:#f1f1f1;
}
.text p {
margin: 8px 0;
}