JSFiddle - React, Tailwind, and code Playground

HTML

<div class="float"></div>
<div class="spacer1"></div>
<div>
  <div class="spacer2"></div>
  <div class="negMargin">
   This text shouldn't overlap the orange float.
 </div>
</div>

CSS

.float {
  float: left;
  background: orange;
  height: 30px;
  width: 50px;
}
.spacer1 {
   height: 30px; /* or you can use "clear:both" */
}
.spacer2 {
  height: 1px;  /* this just needs to have some nonzero height. */
}
.negMargin {
  margin-top:-15px;
  background: lightblue;
}