JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="filler">I'm filling all width!</div>
</div>
<div id="widths"></div>

<div style="color: green">&lt;— resize me  </div>

CSS

.parent {
    position: relative;
    background: rgba(70,70,70,.5);
    width: 80%;
    height: 147px;
}

.filler {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(70,70,70,.5);
    margin: 1em;
    padding: .5em;
    border: 3px solid rgba(35,35,35,.5);
}

JavaScript

$(window).resize(function(){
    $('#widths').html('')
        .append('parent width: ' + $('.parent').outerWidth(true) + '<br>')
        .append('filler width: ' + $('.filler').outerWidth(true) + '<br>');
});
$(window).resize();