JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="content">center point V center point</div>
    <div id="container">
        <div id="left">L</div>
        <div id="center">C</div>
        <div id="right">RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR</div>
    </div>
</body>

CSS

#content {
    text-align:center;
}

#left, #right, #center {
	 flex: 1;
}

#center {
	 min-width: 5em;
	 word-break: break-all;
}

#container {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 border: 1px dashed black;
}