JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='ru' xml:lang='ru' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'></script>
    <script type="text/javascript">

$(function() {
    var $test1 = $("#test1");
    var test1 = $test1[0];
    $('#result1').text($test1.css('line-height'));
    $('#result1IE').text(test1.currentStyle ? test1.currentStyle.lineHeight : "n/a");
        
    var $test15 = $("#test15");
    var test15 = $test15[0];
    $('#result15').text($test15.css('line-height'));
    $('#result15IE').text(test15.currentStyle ? test15.currentStyle.lineHeight : "n/a");
});
        
    </script>
    <title>Buggy detection of line-height in IE</title>
</head>
<body>
    <p id="test1" style="line-height:1;">$('#test1').css('line-height') = <span id="result1"></span></p>
    <p>$('#test1').currentStyle.lineHeight = <span id="result1IE"></span></p>
    <p id="test15" style="line-height:1.5;">$('#test15').css('line-height') = <span id="result15"></span></p>
    <p>$('#test15').currentStyle.lineHeight = <span id="result15IE"></span></p>
    <br>
    <p>In normal browsers we get something like "16px" for a line-height of 1 and "24px" for a line-height of 1.5, however in IE the return is "1" and "1px" respectively. It could be argued that the "1" is correct, but converting 1.5 to "1px" is obviously wrong.</p>
    <br>
    <p>Note that it's only incorrect going through jQuery; if we get the line-height directly via IE's .currentStyle, the correct value is returned.</p>
</body>
</html>