JSFiddle - React, Tailwind, and code Playground

HTML

<UL class="z">
  <LI>aaa</LI>
  <LI>bbb</LI>
  <LI>ccc</LI>
</UL>

<hr>
<UL>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>
    <span class="r">
      4-
      <div class="freefloat">
        <UL class="z">
          <LI>aaa</LI>
          <LI>bbb</LI>
          <LI>ccc</LI>
        </UL>
      </div>
    </span>
  </li>
  <li>5 hello world</li>
  <li>6</li>
  <li>7</li>
</UL>

CSS

.r {
  position: relative;
 }

.freefloat {
  background-color: lightgrey;
  position: absolute;
  top: 0px;
  left: 1em;
}

.z {
  background-color: lightgrey;
}