Set floated div's text to float and wrap properly without hardcoding div width?

It's because both divs are inheritting the float: left;. Try adding this to your CSS:

div.test div.text {
    float: none;
    outline: 1px solid red;
}