JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="main">
    <span class="test1">REALLLLYYYYYYYYLONG </span>
    <span class="test1">dddddd </span> 
    <span class="test1">dddddd </span>
    <span class="test1">ddddddd</span>
    </div>

</body>
</html>

CSS

.main
{
    max-width:240px;
    width: auto;
    border:1px solid grey;
    margin:15px;
}

.test1
{   
    background-color:yellow;  
    display:inline-block;  
    width: auto;
}