JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"> 
    
    <div class="extendable">
        
        <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="other">
            
        </div>
        
    </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;
     max-width:100%;
     border: 1px solid red;
}

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