Div positioning - putting one after another

Question

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? What should my html/css look like?

<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;
}

Answer 1

Use display: inline;. Add this css rule:

#problemtext, #problemanswer{    
    display: inline;
}

Have a look: http://jsfiddle.net/cherniv/dPSav/1/