JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

  <p>
    This is a longer text about nothing. Yes you read it correctly. <span>This is the inline part  </span>



    This is the second part. Newlines and extra spaces are ignored!
  </p>

  <hr/>

  <p>
    This is a longer text about nothing. Yes you read it correctly. <span>This is the inline part  </span>
    This is the second part
  </p>
  <hr/>
  <div id="first">Regular DIV</div>
  <div id="second">Floating DIV</div>
  <div id="third">Regular DIV</div>
  <div id="four">Floating div</div>
  <div id="five">Cleared div</div>
</div>

CSS

div.container {
    margin: 10px;
    padding: 2px 5px;
    border: 2px solid green;
}
span {
    background: green;
}
#first {
    background: blue;
    float: left;
}
#second {
    background: orange;
    float: left;
}
#third {
    background: red;
    
}
#four {
    color: white;
    background: black;
    float: left;
}

#five {
    color: white;
    background: magenta;
    clear: both;
}