JSFiddle - React, Tailwind, and code Playground

by tsdexter

HTML

<div id="container">
    <div id="line1">WEED MAN</div>
    <div id="line2">ST. CATHARINES</div>
</div>

CSS

body {
    color: green;
}
#container {
    width: 400px;
    margin: 0 auto;
    outline: 1px solid grey;
    text-align: left;
    font-family: sans-serif;
    font-weight: 900;
}
#line1, #line2 {
    display: inline-block;
    white-space: nowrap;
    transform-origin: 0 0;
    line-height: 1;
    outline: 1px solid red;
}

JavaScript

function scaleText(){
    var w = $('#container').width(),
    	h1 = $('#line1').height(),
        w1 = $('#line1').width(),
        h2 = $('#line2').height(),
        w2 = $('#line2').width(),
    	s1 = w / w1,
        s2 = w / w2,
        nh1 = h1 * s1,
        nh2 = h2 * s2,
        nh = nh1 + nh2,
        nw1 = 100 / s1,
        nw2 = 100 / s2;
    $('#line1').attr('style', 'position: absolute; left: 0;top: 0;transform:scale('+s1+'); width: '+nw1+'%;');
    $('#line2').attr('style', 'position: absolute; left: 0;top: '+nh1+'px;transform:scale('+s2+'); width: '+nw2+'%;');
    $('#container').attr('style', 'position: relative;height: '+nh+'px');
    console.log('w:',w,'nh:',nh,'h1:',h1,'h2:',h2,'nh1:',nh1,'nh2:',nh2,'s1:',s1,'h2:',h2,'w2:',w2,'nh2:',nh2,'nw2:',nw2,'s2:',s2);
        
}
scaleText();