JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<button id='bump'>Bump</button>

<div id="box1">
    LoremContent"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem odio, pharetra et tempor eget, ultrices in diam. Pellentesque sed nunc vitae mauris sodales congue facilisis vitae felis. 
</div>

CSS

div#box1 {
    width:250px;
    height:200px;
    border: 1px solid black;
    background-color: beige;
    line-height:1em;
}

JavaScript

$(function(){ 
    $('#bump').click(function() {

//        $('#box1') .css('padding-top', "+=5" );
//      $('#box1') .css('line-height', "+=5" );
        
        newLineHeight = parseInt($('#box1').css('line-height'))+2+'px';
        $('#box1') .css('line-height', newLineHeight);
        
/*      var lineHeight =   $('#box1').css('line-height');
        lineHeight = Number(lineHeight.replace(/px/,''));
        lineHeight +=5;
        $('#box1').css({'line-height' : lineHeight});  */
    });
});