JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div class="columns">
    <div>
        
        <p>
            <img src="http://bighugelabs.com/img/lolcat-sample.jpg" />
        </p>
        <p>hulabula forfattere</p>
        <div>
            <h1>hejsa hejsa hajsa hejsahejsa hejsa hejsahejsa hejsa hejsajsa hejsa</h1>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar sem lorem, sed vulputate odio ornare et. Quisque eleifend neque vitae diam molestie blandit. Nam lacus enim, suscipit ut sapien nec, feugiat gravida nulla. Morbi id nisi neque. Fusce aliquam nibh vitae velit porttitor dapibus. Nullam quis pellentesque velit, id rutrum diam. </p>
    </div>
    
    <div>
        
        <p>
            <img src="http://img4.wikia.nocookie.net/__cb20070726080107/uncyclopedia/images/2/2a/Lolcats-mah-brutha.jpg" />
        </p>
        <p>hulabula forfattere hulabula forfatterehulabula forfattere hulabula forfatterehulabula forfattere hulabula forfatterehulabula forfattere hulabula forfattere</p>
        
        
        <div>
            <h1>hejsa hejsa hajsa he hejsa hejsajsa hejsa</h1>
        </div>
        
        <p>Lorem ipsui id nisi neque. Fusce aliquam nibh vitae velit porttitor dapibus. Nullam quis pellentesque velit, id rutrum diam. Lorem ipsui id nisi neque. Fusce aliquam nibh vitae velit porttitor dapibus. Nullam quis pellentesque velit, id rutrum diam. Lorem ipsui id nisi neque. Fusce aliquam nibh vitae velit porttitor dapibus. Nullam quis pellentesque velit, id rutrum diam. </p>
    </div>
</div>

SCSS

body {
    line-height: 22px;   
}

p {
    margin: 0;
    
    & + p {
        margin-top: 22px;
    }
}

img {
    display: block;
}

h1 {
    margin: 0;
    font-size: 30px;
    line-height: 40px;
}

h2 {
    margin: 0;
    line-height: 28px;
}

.columns {
    overflow: hidden;

    > div {
        float: left;
        width: 50%;
    }
}

JavaScript

$.fn.grundlinje = function(options) {
    var $container = $(this);
    var $elements = $container.find("h1, h2, h3, h4, h5, h6, img");
    
    var options = $.extend({
        lineHeight: 22,
        extraWhiteSpace: 0
    }, options);
    
    var nearestBaseLine = function(n) {
        if(n > 0) {
            return Math.ceil(n/options.lineHeight) * options.lineHeight;
        } else if( n < 0) {
            return Math.floor(n/options.lineHeight) * options.lineHeight;
        } else {
            return options.lineHeight;
        }
    }
    
    //Fix wanted extra white space to match the line-height
    options.extraWhiteSpace = nearestBaseLine(options.extraWhiteSpace);
    
    var headlineCalculate = function(bodyLineHeight, headlineLineHeight, lineCount, firstChild) {
        var totalMargin = options.extraWhiteSpace + (bodyLineHeight * (lineCount + 1)) - (headlineLineHeight * lineCount);
        
        if (totalMargin <= headlineLineHeight) {
            totalMargin += (options.lineHeight * lineCount);
        }
        
        if (totalMargin < 0) {
            totalMargin += bodyLineHeight;
        }
        
        var topMargin = parseInt(totalMargin * 0.66, 10);
        var bottomMargin = totalMargin-topMargin;
        
        if (firstChild) {
            topMargin = 0;        
            bottomMargin = nearestBaseLine(((headlineLineHeight * lineCount) + options.lineHeight)) - (headlineLineHeight * lineCount);
        }
        
        return {
            marginTop: topMargin,
            marginBottom: bottomMargin
        }
    }
    
    var handleImages = function($image) {
        var imageHeight = $image[0].naturalHeight;
        
        $image.height(Math.round(imageHeight / options.lineHeight) * options.lineHeight);
        
        $image.css({
            minHeight: (Math.round(imageHeight / options.lineHeight) * options.lineHeight)
        });
    }
    
    var handleText = function($headline) {
        var lineHeight =...