jQuery在点击和替换内容时水平扩展DIV

Question

我很难让这个http://jsfiddle.net/L5P2Y/水平而不是垂直工作。

我在右侧有任务列表，当我点击div（包含任务信息）时，我希望“任务列表”从100％缩小到70％宽度，其他30％将采用带有注释的新div（或其他内容）。这是我的html / css http://jsfiddle.net/WZLHm/

<style>
.task{background:blue;width:70%;float:left;color:white;}
.task a{color:white;}
.content{background:red; width:30%; float:left;}
</style>
<div class="task">        
    <h6>This div shrinks from 100% to 70% width when user clicks on any of links</h6>

    <ul>
        <li><a href="#">First task</a></li>
        <li><a href="#">Second task</a></li>
        <li><a href="#">Third task</a></li>
    </ul>
</div>
<div class="content">
    Content that will be replaced on each click
</div>