I am fairly new to HTML and Javascript. I need to create a page as the following http://livedemo00.template-help.com/wt_37383/index-4.html

I dont want to use a plugin and am trying to create it on my own.

Below is the code I came up with

<!DOCTYPE html>
<html>
<head>
<style>

#div1
{
width:100px;
height:100px;
background:gray;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
float: left;
border: 2px solid;
}

#div1:hover
{
width:300px;
}

#div2
{
width: 150px;
background-color: red;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}

#div3
{
background:red;
float: left;
}
</style>
</head>

<body>
<div id="div1">
<Table style="width:100%;height:100%">
<col width="20">
<col width="120">
<td>
<div id="div2"> HELLO </div>
</td>
<td>
<ul>
<li> Text 1 </li>
<li> Text 2 </li>
</ul>
</td>
</table>
</div>

<div id ="div3"></div>
<div id="div1">
<ul>
<li>checking 1 </li>
<li> checking 2 </li>
</ul>
</div>

</body>
</html>
I am facing two issues in this, the Text header is not positioned correctly and the text is not collapsed along with the div section.

http://jsfiddle.net/dipz_26/e9mvS/

Thank you in advance.