JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <div width="120" height="190">
        <svg width="180" height="160">
            <g class="sentimentTooltip" visibility="hidden">
                <rect x="7" y="7" width="50" height="30" rx="5" stroke="#FFDD99" stroke-width="3" stroke-opacity="0.85" fill="#FFFFFF" fill-opacity="0.7"/>
                <text x="10" y="20">
                    <tspan class="sentimentTooltip_data" style="font-weight: bolder; fill: rgb(17, 34, 51);">25</tspan>                    </text>
                <input id="inside" type="text" width="30" height="20" />
            </g>
        </svg>
        <input id="outside" type="text" width="30" height="20" />
    </div>
</body>
</html>

JavaScript

div = $('div').width()
svg = $('svg').width()
svgCss = $('svg').css('width')
inputI = $('#inside').width()
inputO = $('#outside').width()
    
debugMsg ='divElm='+div+', svg='+svg+', svgCss= '+svgCss+', inside='+inputI+', outside='+inputO

document.write(debugMsg)