JSFiddle - React, Tailwind, and code Playground

HTML

<div tabindex="-1" class="x-horizontallayout x-layout x-horizontal x-widget x-has-width" style="width: 100%;">
    <div class="x-expand" style="padding-left: 0px;">
        <div class="x-slot" style="width: 50%; margin-left: 0px;">
            <div class="x-groupbox x-widget x-has-width" id="box1"
                 style="overflow: hidden; width: 100%; padding-top: 20px; padding-bottom: 0px;">
                <div id="caption1" class="x-groupbox-captionwrap" style="width: 100%; margin-top: -20px;">
                    <div class="x-groupbox-caption-start-deco">
                        <div></div>
                    </div>
                    <div class="x-groupbox-caption"><span class="x-groupbox-expander expanded"></span><span>Box with description</span>
                    </div>
                    <div class="x-groupbox-caption-end-deco" style="width: 100%;">
                        <div></div>
                    </div>
                </div>
                <div class="x-groupbox-content x-scrollable" tabindex="-1" style="position: relative;height: 100px;"></div>
                <div class="x-groupbox-deco" style="margin-bottom: 0;"></div>
            </div>
        </div><div class="x-slot" style="width: 50%;">
            <div class="x-groupbox x-widget x-has-width x-has-height x-groupbox-nocollapsable"  id="box2"
                 style="overflow: hidden; width: 100%; padding-top: 20px; padding-bottom: 0px;" id="id0">
                <div id="caption2" class="x-groupbox-captionwrap" style="width: 100%; margin-top: -20px;">
                    <div class="x-groupbox-caption-start-deco">
                        <div></div>
                    </div>
                    <div class="x-groupbox-caption"><span class="x-groupbox-expander expanded"
                                                          style="display: none;"></span><span>Box</span></div>
                    <div class="x-groupbox-caption-end-deco" style="width: 100%;">
                       ...

CSS

.x-horizontallayout {
    outline: 0;
}

.x-slot {
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.x-expand {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
}

.x-groupbox {
    outline: 0;
}

.x-groupbox-content {
    outline: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-bottom-color: rgb(186, 191, 192);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgb(186, 191, 192);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(186, 191, 192);
    border-right-style: solid;
    border-right-width: 1px;
}

.x-groupbox-captionwrap {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: table;
}

.x-groupbox-captionwrap > div {
    display: table-cell;    
}

.x-groupbox-caption-start-deco {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: rgb(30, 49, 70);
    cursor: default;
    font-family: Verdana, tahoma, arial, geneva, helvetica, sans-serif, 'Trebuchet MS';
    font-size: 12px;
    height: 20px;
    line-height: normal;
    padding-top: 10px;
    text-align: left;
    white-space: normal;
    width: 10px;
}

.x-groupbox-caption-start-deco > div {
    border-left-color: rgb(186, 191, 192);
    border-left-style: solid;
    border-left-width: 1px;
    border-top-color: rgb(186, 191, 192);
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: rgb(30, 49, 70);
    cursor: default;
    display: block;
    font-family: Verdana, tahoma, arial, geneva, helvetica, sans-serif, 'Trebuchet MS';
    font-size: 12px;
    height: 10px;
    line-height: normal;
    text-align: left;
    white-space: normal;
    width: 10px;
}

.x-groupbox-caption {
    white-space: nowrap;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: rgb(30, 49, 70);
    cursor: default;
   ...

JavaScript

var detailWidth = function(element) {
    var details = $(element).width();
    
    details += ' ' + element.getBoundingClientRect().width;
    details += ' ' + element.clientWidth;
    details += ' ' + element.scrollWidth;
    details += ' ' + element.offsetWidth;
    
    return details;
};

setInterval(
    function() {
        $('#widthCaption1').text('Caption 1 = ' + detailWidth($('#caption1')[0]));
        $('#width1').text('Box 1 = ' + detailWidth($('#box1')[0]));
        $('#widthCaption2').text('Caption 2 =' + detailWidth($('#caption2')[0]));
        $('#width2').text('Box 2 = ' + detailWidth($('#box2')[0]));
    },
    500
);