Properly aligning div elements

Question

I've been tinkering with this for an hour now and can't quite get it to work.

Basically I have two div elements I want to align next to each other and I want them to be the same height. The height of the second element should match the first since the first can have 1-3 lines of text.

See the HTML below and this link for a pic of the current output.

http://i55.tinypic.com/2ajozgw.jpg

Sorry for the inline CSS, plan on taking it out once I get it right.

            <div style="width:450px;margin:0px auto;">
                <div style="width:90%;-moz-border-radius-bottomleft:8px;-moz-border-radius-topleft:8px;border-left:2px solid #606060;border-top:2px solid #606060;border-bottom:2px solid #606060;border-right:1px solid #606060;padding:10px;font-size:0.9em;float:left;">
                    CATEGORY<br />
                    Test
                 </div>
                <div style="width:10%;background-color:#000000;text-align:center;-moz-border-radius-bottomright:8px;-moz-border-radius-topright:8px;border-top:2px solid #606060;border-bottom:2px solid #606060;border-right:1px solid #606060;padding:10px;float:left;">
                        9
                </div>      
            </div>

Answer 1

Try this (i removed round corners):

<div style="width:400px; position:relative">
    <div style="width:350px; border: solid 1px black">
        CATEGORY<br>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
    </div>
    <div style="width:50px;position: absolute; top:0px; right:0px; bottom:0px; background: black;">
    9
    </div>      
</div>

This is how it looks like: http://i52.tinypic.com/2zisndt.png

Answer 2

The easy solution would be to put this into a table that has one row and two cells. The cells get automatically the same height, and you can make the DIV to span the whole cell.