JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
    <legend>
        I would really like this line to break if it's width is greather than the width of the fieldset, but I can't figure it out
        </legend>
    <p>Lorem  Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the  1500s, when an unknown printer took a galley of type and scrambled it to  make a type specimen book.</p>
</fieldset>


<fieldset>
    <legend><span>
        Here's one with the DIV trick that's not working either, I would really rather not use this anyway
        </span> </legend>
    <p>Lorem  Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the  1500s, when an unknown printer took a galley of type and scrambled it to  make a type specimen book.</p>
</fieldset>

CSS

fieldset{
   background:#ddd;
  
}
legend{
    color: green;
    white-space: normal; 
    
    *margin-left: -7px;
 
}
legend div, legend span {
     display:block;
    
}