Calculate containers and apply left or right based on offset

left-right.js

(function ($) { // passing Jquery $ into the function
    // Define variable for our overall function
    var Timeline = {
        // Define variables for the below function 
        timelineWrapper: $('.timeline'),
        timelineItems: $('.timeline-wrapper'),
        // Initialising functions (Function written below)
        init: function(){
          this.timelineAlignment();
        },

        // The fucntion to show/hide sidebar blocks based on value in the select 
        timelineAlignment: function(){ 
 
            // Create our columns
            timelineLeft = $('<div class="timeline-left"></div>');
            timelineRight = $('<div class="timeline-right"></div>');

            timelineLeft.appendTo(this.timelineWrapper);
            timelineRight.appendTo(this.timelineWrapper);

            this.timelineItems.each(function( index ){
                if(index == 0) {
                  $(this).appendTo('.timeline-right');
                } else if(index == 1) {
                  $(this).appendTo('.timeline-left');
                } else {
                  var lastItemLeft = $('.timeline-left').children().last();
                  var lastItemRight = $('.timeline-right').children().last();
                  var leftOffset = lastItemLeft.offset();
                  var rightOffset = lastItemRight.offset();
                  if((leftOffset.top + lastItemLeft.height()) > (rightOffset.top + lastItemRight.height())) {
                    $(this).appendTo('.timeline-right');
                  } else {
                    $(this).appendTo('.timeline-left');
                  }
                }
            });

        }
    };

    // Drupal Behavior the same as running on dom ready but also on ajax page change
    Drupal.behaviors.contact = {
        attach: function (context, settings) { 
          $(window).load(function () {
            Timeline.init(); // run our initial function
          });
        }
    };

}(jQuery));