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>
    
<br><br>
<em>5) with text-align:justify</em><br/>        
<div>
        <p class="j">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque vestibulu      porttitor. Pellentesque magna magna, interdum at rutrum ut, semper vitae orci.</p>
</div>
    
    
    <br><br>
<em>6) with JS to manipulate the element width</em><br/>        
<div>
        <p class="k">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque vestibulu      porttitor. Pellentesque magna magna, interdum at rutrum ut, semper vitae orci.</p>
</div>
     
<br><br>
<em>7) width:min-content technique (on container)</em><br/>        
<div class="mincontent">
        <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque vestibulu      porttitor. Pellentesque magna magna, interdum at rutrum ut, semper vitae orci.</p>
</div>
    
<br><br>
<em>8) width:max-content technique (on container)</em><br/>        
<div class="maxcontent">
        <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque...

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;
}
body p.j { text-align:justify}
br
{
 clear:left;   
}
.mincontent {
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
}
.maxcontent {
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;
}

JavaScript

var d = document.querySelectorAll('p.k'),
    i, w, width, height;

for(i = 0 ; i < d.length ; i++) {
  width= d[i].offsetWidth;
  height= d[i].offsetHeight;
  
  for(w = width ; w ; w--) {
    d[i].style.width= w+'px';
    if(d[i].offsetHeight !== height) break;
  }
  d[i].style.width= (w+1)+'px';
}