JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span>foo</span>
    <span>bar</span>
    <span>some really long text with word breaks</span>
    <span>baz</span>
</div>

CSS

div{
	color: rgb(0, 105, 173);
	font-family: Arial, sans-serif;
	font-size: 25px;
	font-weight: bold;
	height: 93px;
	margin-bottom: 0px;
	margin-left: 208px;
	margin-right: 208px;
	margin-top: 0px;
	text-align: center;
	text-shadow: rgb(255, 255, 255) 0px 0px 3px;
    width: 250px; /*Set the maximum width*/
    word-wrap: break-word; /*if you want to allow unbreakable words to be broken*/
    display: inline-block; /*The element is placed as an inline element, but it behaves as a block element*/
}