JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <body>
        dsdsdsdsdaasd
        sdsdsdasdsd
        <div class="outer-wrapper">
            <div id="container" class="container">
                <div class="inner-content" id="inner-content">
                    <p>Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options Options</p>
                </div>
            </div>
            <div id="arrow" class="arrow ">&#x25b6;</div>
        </div>
    </body>

</html>

CSS

.outer-wrapper {
        min-width:275px;
        white-space: nowrap;
        margin:0 1%;
    }
    .container {
        min-width:100px;
        margin-left: 0.5em;
        margin-right: 0.5em;
        min-height: 40px;
        vertical-align:middle;
        border: 1px solid #000000;
        display:inline-block;
        white-space:normal;
    min-width:98%;
    }
    .arrow {
        font-size: 10px;
        width:1em;
        text-align: right;
        display:inline-block;
        vertical-align: middle;
    }