JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="box">
        <p>Lorem ipsizzle dolor sit amizzle, consectetuer gangsta bow wow wow. Uhuh ... yih!</p>
    </div>
    <h2>Donizzle posuere</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum convallis accumsan. Morbi leo diam, fermentum ac lacinia id, consectetur non dolor. Vestibulum a leo dolor, nec sagittis neque. Nunc gravida rutrum velit, et consectetur urna pulvinar nec. Proin sit amet massa sem, ut adipiscing lacus. Donec laoreet lorem id orci porttitor id rhoncus orci rutrum. Duis semper viverra nisl, ac sagittis felis interdum eu.</p>
</div>

CSS

#wrapper {
    border: 3px solid lime;
    max-height: 300px;
    width: 300px;
    position: relative;
    z-index: 90;
}
#box {
    background-color: #ffccff;
    border: 3px solid #ff00ff;
    max-height: 150px;
    width: 100px;
    margin-right: 5px;
    margin-top: 5px;
    margin-left: 10px;
    float: right;
    position: relative;
    z-index: 100;
}
p {
    text-align: justify;
    margin-right: 5px;
}
h2 {
    border-bottom: 2px solid black;
    outline: 0px none;  
    margin-right: 5px;
    overflow: hidden;
}