块元素垂直对齐的问题

HTML code

<style>
body{font:12px tahoma;}
dl,dt,dd,li,ul{margin:0;padding:0;}
dl{width:200px;height:auto;padding:5px 5px;border:1px solid black;}
dt{float:left;margin-right:10px;}
dd{float:left;}
li{float:left;margin-right:10px;}
</style>
<dl>
    <dt>标题</dt>
    <dd>
        <ul>
            <li>内容一 |</li>
            <li>内容二 |</li>
            <li>内容三 |</li>
            <li>内容四 |</li>
            <li>内容五</li>
        </ul>
    </dd>
</dl>

内容不固定的情况下,以上代码结果中..
1.如何修改能让"标题" 垂直对齐于 "内容"?
2.内容四的时候自动换行,因为宽度问题,内容三明显出错,如何让内容三的时候就应该自动换行?

把dl宽度减小，内容三的时候就换行了