JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
    <div class="container1">
        Container text
        <div class="ui-widget">
            Widget Parent
            <div class="ui-widget">Widget Child</div>
        </div>
    </div>
    <hr />
    <div class="container2">
        Container text
        <div class="ui-widget">
            Widget Parent
            <div class="ui-widget">Widget Child</div>
        </div>
    </div>   
</div>

CSS

.container1, .container2
{
    font-size: 24px;
}
.container1 .ui-widget, .container1 .ui-widget .ui-widget {
     font-size: 60% !important;
}

.container2  .ui-widget
{
    font-size: 60% !important;
}

.container  .ui-widget
{
    font-size: 150% !important;
}