JSFiddle - React, Tailwind, and code Playground

HTML

<em>1) standard paragraph text, no container</em><br/>        
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque vestibulum porttitor. Pellentesque magna magna, interdum at rutrum ut, semper vitae orci.</p>

<br><br>
<em>2) short text, not long enough to wrap</em><br/>        
<div>
        <p>Crack the Shutters Open Wide for Parkside Paradise</p>
</div>
    
<br><br>
<em>3) long text wrapping, container doesn't collapse</em><br/>        
<div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque vestibulum porttitor. Pellentesque magna magna, interdum at rutrum ut, semper vitae orci.</p>
</div>
    
<br><br>
<em>4)with a forced line break</em><br/>        
<div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque vestibulum
            porttitor. Pellentesque magna magna, interdum at rutrum ut, semper vitae orci.</p>
</div>

CSS

body {
    font: normal 1em/1.6 sans-serif;
}
body div, body p
{
    margin:0;
    padding:0;
}
body div {
	background-color: #AAFF3B;
    max-width:80%;
    padding:20px;
    display:inline-block;
    float:left;
}
body p {
	display:inline-block;
	background-color: #FFAA3B;
	position: relative;   
    float:left;
    white-space:pre-line;
    clear:left;
}
br
{
 clear:left;   
}