jQuery expand DIV horizontaly on click and replace content

Question

I'm struggling to get this http://jsfiddle.net/L5P2Y/ to work horizontal and not vertical.

I have task list on right side, when I click on div (containing task info) I would like that 'task list' shrinks from 100% to 70% width , other 30% will take new div with comments (or other content). This is my 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>