JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
   <div class="title">
        Extend this to see undesired effect!
   </div>
   <div class="extendable">This content is dynamic!</div>
</div>

SCSS

.container {
    width:100px;
    display: table;
    border: 1px solid #000;
    float:right;
}

.container div.extendable {
    font-size:24px;
    white-space: nowrap;
    background: #FF0000;
    color: #FFF;
}

.container div.title{
    font-size:10px;
    white-space: normal;
    background: #CCC;
}