A simple vanilla javascript class to implement a two column, left-to-right layout.

two-column-layout.css

.article {
    width: 50%;
    float: left;
    clear: left;
 
.article.right {
    float: right;
    clear: right;
}

two-column-layout.js

/**
 * A simple vanilla javascript class to implement a two column, left-to-right layout
 *
 * @author Tim Ross <timrross@gmail.com>
 */ 

/**
 * A class that implements the two column layout. 
 * Called like this:
 * <code>
 * let layout = new TwoColumnLayout('.article)
 * </code>
 */
class TwoColumnLayout {

    constructor(selector, rightClassName = 'right') {
        this.selector = selector
        this.rightClassName = rightClassName

        this.debounceLayout = debounce(() => {
            this.layout()
        }, 100)

        this.layout()
        this.addEventListeners()
    }

    /**
     * Add the class 'right'
     */
    layout() {
        let leftColumnHeight = 0, rightColumnHeight = 0
        let articles = document.querySelectorAll(this.selector)
        articles.forEach((el, index) => {
            el.classList.remove(this.rightClassName)
            let outerHeight = this.calculateOuterHeight(el);
            if (leftColumnHeight > rightColumnHeight) {
                el.classList.add(this.rightClassName)
                rightColumnHeight += outerHeight
            } else {
                leftColumnHeight += outerHeight
            }
        })
    }

    addEventListeners() {
        window.addEventListener(
            "resize",
            () => {
                this.debounceLayout();
            },
            false
        );
    }

    /**
     * Include margins in the outerheight calculation
     * @param {Element} el
     */
    calculateOuterHeight(el) {
        var height = el.offsetHeight;
        var style = getComputedStyle(el);

        height += parseInt(style.marginTop) + parseInt(style.marginBottom);
        return height;
    }
}

function debounce(func, wait, immediate) {
    var timeout
    return function () {
        var context = this,
            args = arguments
        var later = function () {
            timeout = null
            if (!immediate) func.apply(context, args)
        };
        var callNow = immediate && !timeout
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)
        if (callNow) func.apply(context, args)
    }
}

export default TwoColumnLayout

usage.js

import TwoColumnLayout from './two-column-layout.js'

let layout = new TwoColumnLayout('.article');