JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="text">
        Extend this to see undesired effect! alksjdflkajsdlfjasdkfjlksd
    </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{
padding: .3em;
border: 1px solid red;
max-width: 200px;
word-break: break-all;
display: block;

}
        
    
    .extendable {
        border: 1px solid blue;
        width: 200px; //static sample
        height: 200px; //static sample
    }
}