JSFiddle - React, Tailwind, and code Playground

by Steve Wellens

HTML

<div id="test">test</div>
<div class="test2">test</div>
<div class="test3">test</div>
<div class="test4">test</div>

CSS

html,body{width:100%;height:100%;padding:0px;}
.test{width:50%; background:green}
.test2{width:500px; background:yellow}
.test3{width:500px;height:20%; background:blue}
.test4{width:500px;height:200px; background:red}

JavaScript

(function($) {
    $.fn.getWidth = function() {
        var target_width = parseFloat(this.width());
        var target_parent_width = parseFloat($(this).parent().width());
        $('body').append('<div  id="temporary_document_resizer_holder"  style="width:5000px;height:5000px;"></div>');
        var target_temp_width = parseFloat($(this).clone().html('_blank_').appendTo('#temporary_document_resizer_holder').width());
        $('#temporary_document_resizer_holder').remove();

        return target_width == target_temp_width ? target_width : (Math.round(100 * target_width / target_parent_width) + '%');
    }}

    alert("Width: " + $('.test').getWidth());
    alert("Width: " + $('.test2').getWidth());
    alert("Width: " + $('.test3').getWidth());
    alert("Width: " + $('.test4').getWidth());