Untitled

<html>
<head>
    <style>
        .grid {
            display:grid;
            overflow:hidden;
            background:transparent;
        }

        * {
            box-sizing: border-box;
        }

        .tab-wrapper {
            width:100%;
            height:100%;
            display:grid;
        }

        .grid > * {
            min-width:0;
            min-height:0;
        }
        .splitter-vertical {
            background-color:red;
        }

        .wrapper {
            position:relative;
            height:21px;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div class="grid" style="width:657px; height:552px">
        <div id="SPT001" class="grid" style="grid-row-start:2; grid-column-start:1; grid-row-end:3; grid-column-end:2; grid-template-rows: 0.49fr 4px 0.51fr">
            <div id="SPT011" class="grid" style="grid-row-start:1; grid-row-end:2; grid-template-columns:1fr; grid-template-rows:1fr">
                <div class="grid" style="grid-row-start:1; grid-column-start:1; grid-row-end:2; grid-column-end:2; grid-template-rows:100fr; grid-template-columns:100fr">
                    <div id="SPT002" class="grid" style="grid-area: 1 / 1 / 2 / 2; grid-template-columns: 0.64fr 4px 0.36fr">
        <div id="SPT0021" class="grid" style="grid-column-start:1; grid-column-end:2; grid-template-columns:1fr; grid-template-rows:1fr">
            <div class="grid" style="grid-row-start:1; grid-column-start:1; grid-row-end:2; grid-column-end:2; grid-template-rows:100fr; grid-template-columns:100fr">
                <div class="groupbox groupbox-level0" style="grid-row-start:1; grid-column-start:1; grid-row-end:2; grid-column-end:2">
                    <div class="tab-wrapper" style="display:grid; grid-template-rows:auto 100fr">
                        <div class="tab-wrapper" style="display:grid; grid-template-rows:100fr; grid-row-start:2; grid-row-end:3">
                            <div class="grid" style="grid-row-start:1; grid-column-start:1; grid-row-end:2; grid-column-end:2; grid-template-rows: minmax(24px, min-content) minmax(24px, min-content) minmax(24px, min-content) minmax(24px, min-content) minmax(24px, min-content); grid-template-columns: minmax(auto, 250px) minmax(auto, 150px) minmax(auto, 100px)">
                                <div style="grid-row-start:1; grid-column-start:1; grid-row-end:2; grid-column-end:4; display:grid; grid-template-columns:100px 70fr" class="controlContainer">
                                    <label>TEXT1</label>
                                    <div class="wrapper"></div>
                                </div>
                                <div style="grid-row-start:2; grid-column-start:1; grid-row-end:3; grid-column-end:2; display:grid; grid-template-columns:100px 70fr" class="controlContainer">
                                    <label>TEXT2</label>
                                    <div class="wrapper"></div>
                                </div>
                                <div class="grid" style="grid-row-start:5; grid-column-start:1; grid-row-end:6; grid-column-end:3; grid-template-rows:100fr; grid-template-columns:100px 50fr 50fr">
                                        <label>TEXT3</label>
                                        <div style="grid-row-start:1; grid-column-start:2; grid-row-end:2; grid-column-end:3; display:grid; grid-template-columns:0px 70fr" class="controlContainer">
                                            <label style="visibility:collapse;">TEXT4</label>
                                            <div class="wrapper"></div>
                                        </div>
                                        <div style="grid-row-start:1; grid-column-start:3; grid-row-end:2; grid-column-end:4; display:grid; grid-template-columns: 0px 70fr" class="controlContainer">
                                            <label></label>
                                            <div class="wrapper"></div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="splitter-vertical" style="grid-column-start:2; grid-column-end:3"></div>
        <div id="SPT0022" class="grid" style="grid-template-columns:1fr; grid-template-rows:1fr; grid-column-start:3; grid-column-end:4"></div>
    </div>
                </div>
            </div>
        </div>
    </div>
    <button onclick="document.getElementById('SPT002').style['grid-template-columns'] = '0.1fr 4px 0.8fr'">TRIGGER FORCED REFLOW</button>
</body>
</html>