JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<div class="thinger">...</div>
<div class="thinger">...</div>
<div class="thinger">...</div>

change width<br>
<button>50px</button>
<button>100px</button>

CSS

.thinger {
    background-color:#c00;
    margin-top: 3px;
}

JavaScript

$('button').click(function(e) {
    // get the dynamic width setting
    var maxWidth = $(e.target).text(),
        newRule = '.thinger{width:' + maxWidth + ';}';
        styleTag = $('#thinger-style');
    
    if (styleTag.length) {
        // update existing
        styleTag.text(newRule);
    } else {
        // create for the first time
        $('<style id="thinger-style">' + newRule + '</style>').appendTo("head");
    }
});