JSFiddle - React, Tailwind, and code Playground

by rkarbowski

HTML

<div id="parent">
    <h1>#parent { width:300px; padding:10px }</h1>
    <div id="columns">
        <h2>#columns { column-width:300px; width: auto; }</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet volutpat est vel sodales. Nulla varius mattis sapien at mattis. Maecenas magna urna, imperdiet at pharetra non, feugiat at quam. Donec aliquet dolor eget neque blandit et gravida augue condimentum. Aenean non lectus enim. Donec magna lacus, egestas id semper sed, accumsan at lectus. Nulla ornare consectetur elit eget faucibus.</p>
        <p>Mauris in tincidunt felis. Aliquam feugiat justo sed ligula sollicitudin tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel massa felis, eu ultrices purus. Sed viverra gravida faucibus. Donec facilisis purus vitae urna pulvinar scelerisque. Proin condimentum tortor non elit rhoncus commodo. Morbi ac gravida nulla. Nunc non urna a erat pellentesque eleifend nec nec erat. Ut rhoncus pharetra lorem, et fermentum metus fringilla ultrices. Cras ac leo eros, sit amet dapibus velit. Proin ac est eget augue sodales lacinia. In viverra risus id felis congue placerat. Morbi mattis dictum ipsum ultricies hendrerit.</p>
        <p>Donec quis ante sit amet massa lacinia dignissim eu vel ligula. Pellentesque varius eleifend augue a blandit. Duis ac lorem ut mi bibendum hendrerit in non sapien. Vestibulum sodales elementum hendrerit. Maecenas ornare accumsan suscipit. Proin lacinia sagittis adipiscing. Vivamus consequat, ligula in egestas vehicula, purus odio sagittis diam, a posuere orci quam non nisl. Sed sit amet dui et lectus vestibulum porta nec sed tellus.</p>
        <p>Curabitur nec orci nulla. Fusce pulvinar arcu in eros sagittis pellentesque. Aenean ac sem metus, sit amet ullamcorper ipsum. Nulla egestas auctor rhoncus. Suspendisse auctor faucibus venenatis. Donec justo justo, aliquet in venenatis ac, consectetur et lacus. Sed ac est eget nisl suscipit consequat...

CSS

h1, h2, h3, h4 {
    margin:0 0 10px 0;
    font:10px monospace;
}
h1 { color:blue; }
h2,h3,h4 { color:red; }
h3,h4 { margin-left:10px;}
#parent {
    width:300px;
    outline:2px solid blue;
    height:270px;
    margin:10px;
    padding:10px;
}
#columns {
    height:250px;
    outline:2px solid red;
    -webkit-column-width:300px;
    -webkit-column-gap:20px;
    -moz-column-width:300px;
    -moz-column-gap:20px;
    -o-column-width:300px;
    -o-column-gap:20px;
    -ms-column-width:300px;
    -ms-column-gap:20px;
    column-width:300px;
    column-gap:20px;
}

JavaScript

(function($){
    $.fn.extend({ 
        getColumnsWidth: function() {
           
                // append an empty <span>
                $this = $(this).append('<span></span>');
                
                // grab left position
                var pos = $this.find('span:last-of-type').position().left;
                
                // get prefix for css3
                var prefix;
                if (jQuery.browser.webkit) prefix = '-webkit-';
                else if (jQuery.browser.opera) prefix = '-o-';
                else if (jQuery.browser.mozilla) prefix = '-moz-';
                else if (jQuery.browser.msie) prefix = '-ms-';
               
                // add the width of the final column
                pos += parseInt($this.css(prefix + 'column-width'), 10);
             
                // subtract one column gap (not sure why this is necessary?)
                pos -= parseInt($this.css(prefix + 'column-gap'),10);
                
                // remove empty <span>
                $(this).find('span:last-of-type').remove();
            
                // return position
                return pos;
         
        }
    });
})(jQuery);

    
$('#colw1').html($('#columns').width());
$('#colw2').html($('#columns').getColumnsWidth());