Cacher is the code snippet organizer for pro developers

<!-- "tableized" dl with descriptions next to terms 
      as long as the width of the longest term takes less than 50%
      of the available space.
      Also sets height of dd to be at least height of the dt
-->

<div class="main">
<dl class="dl-table">  
    
    <dt>Term 1</dt>
    <dd>Descripton 1<br/>uhfvhghg hgjhgkj</dd> 
    
    <dt>Term 2<br/>and a linebreak</dt>
    <dd>Descripton 2</dd>
    
    <dt>Term 3</dt>
    <dd>Descripton 3</dd>
    
    <dt>Term 4</dt>
    <dd>Descripton 4</dd>
</dl>

<dl class="dl-table">	
    
    <dt>Term 1 with a much longer label</dt>
    <dd>Descripton 1<br/>uhfvhghg hgjhgkj</dd> 
    
    <dt>Term 2<br/>ttt</dt>
    <dd>Descripton 2</dd>
    
    <dt>Term 3</dt>
    <dd>Descripton 3</dd>
    
    <dt>Term 4</dt>
    <dd>Descripton 4</dd>
</dl>
</div>
<style>

dl.dl-table {
    position: relative;
}
dl.dl-table dt {
    float: left;
    background: silver;
}
dl.dl-table dd {
    margin-left: 0;
    margin-bottom: 0.5em;
    border-bottom: 1px solid silver;
    padding-bottom: 0.5em;
    background: gray;
}
</style>
<script>
function dl_table() {
    $dt_width = 0;
    $dt_height = 0;
    
    $dd_width = 0;
    $dd_height = 0;
    
    $dt_padding = 20;
    
    $('.dl-table dt').each(function () {
    
        /*
        $dt_height = $(this).height();
        $dd_height = $(this).next().height();
        */
        
        if ($(this).width() > $dt_width) {
            $dt_width = $(this).width();
        }
        if ($(this).next().width() > $dd_width) {
            $dd_width = $(this).next().width();
        }    
        if ( $(this).height() > $(this).next().height() ) {
            $(this).next().height($(this).height());
        }
    });
    
    if( ($dt_width * 2) < $dd_width){
        $('dd').css({
            'padding-left': $dt_width + $dt_padding,
            'clear':'none'
        });
    }
    else {
        $('.dl-table dd').css({
            'clear':'left',
            'padding-left':'0'
        })
    }
}

$(document).ready(function(){
    // initialize our jQuery codes after the DOM is ready
    dl_table();
});
$(window).load(function(){
    // initialize after images are loaded 
});

$(window).on('resize', function(e)
{
    window.resizeEvt;
    $(window).resize(function()
    {
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function()
        {
            dl_table();            
        }, 250);
    });
});
</script>