Getting my DIVs to line up seems hard

Question

I have a very simple code:

<div>
  <div>
    <div>Topic</div>
    <div>Sub Topic</div>
  </div>
  <div>
    <div>test 1</div>
    <div>Test 2</div>
  </div>
</div>

But I want to get "test 1" to appear right of Topic. Now it appear below. Is there a way to solve with CSS?

Answer 1

<div>
  <div style="float:left;width:200px;">
    <div>Topic</div>
    <div>Sub Topic</div>
  </div>
  <div style="float:left;width:200px;">
    <div>test 1</div>
    <div>Test 2</div>
  </div>
<div style="clear:both;"></div>
</div>

Answer 2

As in my comment, I'm using a dl element here.

The HTML is far more semantic, and much lighter:

See: http://jsfiddle.net/46WRw/

<dl class="topics">
    <dt>Topic</dt>
    <dd>test 1</dd>

    <dt>Sub Topic</dt>
    <dd>Test 2</dd>
</dl>

.topics {
    overflow: hidden; /* clear floated child elements */
    background: #ccc;
    width: 200px
}
.topics dt, .topics dd {
    margin: 0;
    padding: 0;
    float: left;
    width: 50%
}
.topics dt {
    font-weight: bold
}