How to resize columns of two table on mouse drag event for only one of the columns?

I have two tables with id sample1 & sample2. sample1 contains <th class="header"> and sample2 contains <td class="desc">. All I want to do is when I resize <th> in sample1 it should also resize <td> in sample2 automatically in same synchronization. I am using jQuery resizeable() method but I am not getting it.

Please help.

Here is code for reference:

<script type="text/javascript" charset="utf-8">
            $(function() {              
                $("#sample1 .header").resizable();
                $("#sample2 .desc").resizable();
            });
        </script>

</head>
<body>
    <div class="center" >



         <table id="sample1" width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <th class="header">header</th><th class="header">header</th>
            </tr>
        </table>
        <table id="sample2" width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td class="desc">cell</td>
                <td class="desc">cell</td>
            </tr>
            <tr>
                <td class="desc">cell</td>
                <td class="desc">cell</td>
            </tr>
            <tr>
                <td class="desc">cell</td>
                <td class="desc">cell</td>
            </tr>                                                                   
        </table>


    </div>  




 </body>
 </html>

Solution

This should do it:

$(function() {              
     $("#sample1 .header").resizable({
          alsoResize: "#sample2 .desc"});
     $("#sample2 .desc").resizable({
          alsoResize: "#sample1 .header"});
});

also have a look at the api for JQuery resizable here

Update:

You could do something like this.

<html>
    <head>
        <style>
            .header,.desc{
                width: 100px;
            }
        </style>
        <script type="text/javascript" charset="utf-8">
            $(function() {                         
                $("#sample1 .header").resizable({
                    alsoResize: "#sample2 .desc"});
                $("#sample2 .desc").resizable({
                    alsoResize: "#sample1 .header"});
            });
        </script>
    </head>
    <body>
        <div class="center">    
            <table id="sample1" border="0" cellpadding="0" cellspacing="0">
                 <tr>
                      <th class="header">header</th>
                      <th class="header">header</th>
                 </tr>
            </table>
            <table id="sample2" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="desc">cell</td>
                    <td class="desc">cell</td>
                </tr>
                <tr>
                    <td class="desc">cell</td>
                    <td class="desc">cell</td>
                </tr>
                <tr>
                    <td class="desc">cell</td>
                    <td class="desc">cell</td>
                </tr>                                                                   
            </table> 
        </div>      
     </body>
 </html>