JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">

        <div class="container">

            <div class="container2">

                <div class="box">YES</div>

                <div class="txt">REALLY REALLLY REAAAAALLLY REAAAAALLLY REAAAAALLLY BEAUTIFULL TEXT, PERHAPS THE MOST

                    BEAUTIFULL TEXT IN THE WORLD</div>

            </div>

            <div class="box">NO</div>

        </div>

    </div>

CSS

.box {

            width: auto;

            height: 40px;

            border: 1px solid red;

            flex: 0 0 auto;

            position: relative;

        }

 

        .txt {

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

            font-size: 18px;

            flex: 1 0 auto;

            width: 0px;

            position: relative;

        }

 

        .container {

            font-size: 16px;

            line-height: 3rem;

            box-sizing: border-box;

            position: relative;

            display: flex;

            padding: 0;

            margin: 0;

            max-width: 100%;

            text-align: start;

            flex: 0 0 auto;

            width: auto;

            height: auto;

        }

        .container2{

            font-size: 16px;

            line-height: 3rem;

            box-sizing: border-box;

            position: relative;

            display: flex;

            flex: 1 0 auto;

            padding: 0;

            margin: 0;

            max-width: 100%;

            text-align: start;

            align-items: center;

            height: auto;           

        }

 

        .parent {

            width: 400px;

            border: 1px solid lime;

        }