JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true">
    <ul>
        <li>List 1</li>
    </ul>
</div>

CSS

div{
    width: 300px;
    height: 300px;
    border: 1px solid green;
}
div > div, div > p{
 	border: none;
    width: auto;
    height: auto;
}
div > div:after, div > p:after{
    content: "div or p generated that does not belong here";
    background: gray;
}
ul{
    list-style-type:square;
    padding-left: 32px;
}