JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head></head>
<body>
    <div class="wrapper">
        <div class="left">
            left text left text left text left text left text left text left text left text left text left text left text left text left text 
        </div>
        <div class="center ">
            center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text center text 
        </div>
        <div class="right">
        right text right text right text right text right text right text right text right text right text right text right text right text 
        </div>
    </div>
</body>
</html>

CSS

.left { 
    float: left;
    width: 100px;
}
.wrapper {
   overflow: hidden; /* this does the magic */
}
.right { 
    /*float: right;/**/
    width: 120px;
    /* display: none; /**/
    /* uncomment the line above and watch how center auto-expands */
}

/* just some visual stuff */
.left, .center, .right {
    margin: 0 5px;
    padding: 5px;
    background-color: #ccffcc;
}