JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div class="ui-widget-overlay">widget contents</div>
<button id="tall">tall</button>
<button id="short">short</button>
<button id="default">default</button>

CSS

.ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 39px;
         height: 150px !important;
         width: 150px !important;
         border:1px solid red;
      }

JavaScript

var $stylesheet = $('<style type="text/css" media="screen">\
                    .tall{height:300px !important;}\
                    .short{height:100px !important}\
                    </style>');

$('body').append($stylesheet);


$('button').click(function(){
    switch(this.id)
    {
        case 'short':
            $('.ui-widget-overlay').removeClass('tall').addClass('short');
            break;
        case 'tall':
            $('.ui-widget-overlay').removeClass('short').addClass('tall');
            break;
        case 'default':
            $('.ui-widget-overlay').removeClass('tall short');
            break;
    }
})