JSFiddle - React, Tailwind, and code Playground

by kritya

HTML

Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before Content before 

<div>
    <div class="container">
        <p>
            Random text Random textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom textRandom text
        </p>
        
        <div class="side">
            <div class="sidetitle">
                Drop
            </div>
            <div class="drop">
                <ul>
                    <li>ooo</li>
                    <li>mmm</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.container {
    position:relative;
    padding-top:1.5em;
    background:cyan;
}
.side {
    position:absolute;
    top:0px;
    right:0px;
    background:black;
    color:white;
    z-index:1;
}
.sidetitle{
    top:0px;
    width:50px;
    float:right;
}
.drop
{
    top:1em;
}