JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    
    <div class="test1"><p>dddddd</p><p> ddddddd</p><p> dddddd</p><p> ddddddd</p></div><br />
    
    <div class="test1"><span class="test2">dddddd ddddddd dddddd ddddddd</span></div><br />
    
    <div class="test3"><p>dddddd</p><p> ddddddd</p><p> dddddd</p><p> ddddddd</p></div>
    
</body>
</html>

CSS

.test1
{
max-width:100px;
background-color:yellow;
}

.test2
{
background-color:grey;
}

.test3
{
float:left;
background-color:yellow;
}