JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="text">
        Extend this to see undesired effect!Extend this to see undesired effect!Extend this to see undesired effect!Extend this to see undesired effect!Extend this to see undesired effect!Extend this to see undesired effect!
    </div>
    <div class="extendable">
    </div>
</div>

SCSS

html {
    font-size: 12px;
}

.container {
    float: right;
    min-width: 10em;
    padding-left: 1em;
    border: 1px solid black;
    .text {
        word-break:break-all;
        width:100%
        border: 1px solid red;
    }
    .extendable {
        border: 1px solid blue;
        width: 500px; //static sample
        height: 200px; //static sample
    }
}

.text-inner{
    width:100%;
}

JavaScript

var exWidth = $('.extendable').css('width');
$('.text').css('width', exWidth);