How to get this script to update automatically

How to get this script to update automatically

I'm new to jQuery and a Javascript novice. I would love some involvement in developing the following script. It keeps three liquid columns to the same height even though their contents vary. It works fine until the browser window is dragged to a new size.

There are lots of things that could be done to improve it but getting it to adjust as the window is dragged to a new size is my immediate interest.

Thanks to anyone that can help.
  1.  <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
     
    <style type="text/css">
    #container div {
     float: left;
     width: 30.3%;
     margin: 0 1%;
     background: grey;
    }
    </style>
     
    </head>
    <body>

    <div id="container">

     <div> 
     <h3>Div One</h3>



















     <p>Paragraphs of varying length.</p> 
     </div>
     
     <div> 
     <h3>Div Two</h3>
     <p>Paragraph two</p> 
     </div>
     
     <div> 
     <h3>Div Three</h3>
     <p>The point is that the height of each of the divs can vary because of the paragraphs.</p> 
     </div>











     
    </div>

    <script>

    $ (
     function() {
     
     var fhf = $("#container div:first").innerHeight();
     var fhl = $("#container div:last").innerHeight();
     
     if (fhl > fhf) {
     $("#container div").each(function() {
     $(this).css('height', fhl);
     }); 
     } 
     
     else {
     $("#container div").each(function() {
     $(this).css('height', fhf);
     }); 
     }

    });

    </script>
    </body>
    </html>