JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mainList">
    <li>
        <div>
            <ul>
                <li>top</li>
            </ul>
            <span>icon</span>
        </div>
        <div class="container relative">
            <ul class="dropdown-list absolute">
                <li>
                    <label>
                        <input type="checkbox" value="{{name}}">
                        <span>{{name................}}</span>
                    </label>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div>
            <ul>
                <li>top</li>
            </ul>
            <span>icon</span>
        </div>
        <div class="container relative">
            <ul class="absolute">
                <li>
                    <label>
                        <input type="checkbox" value="{{name}}">
                        <span>{{name................}}</span>
                    </label>
                </li>
            </ul>
        </div>
    </li>
</ul>

CSS

.mainList>li{
    display:inline-block;
}

.container{
    width: 200px;    
}

/* config */
ul {
  list-style: none;
}
ul, li {
    margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  word-wrap: break-word;
    
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}


.dropdown-list {
    background-color: yellow;
}