JSFiddle - React, Tailwind, and code Playground

HTML

<!-- this simulates the menu rollover image -->
<div id="menuitem" class="element" style="position:absolute; background-color:#ff0000; top:0px; left:0px; width:200px; height:300px; text-align:left;">
    <div id="menu" class="menuContent">
        <br/>
        <p>Func 1  / Func 2</p>
    <br/>
    </div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <br/>
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

<div id="menuitem2" class="element" style="position:absolute; background-color:#ff0000; top:0px; left:210px; width:200px; height:300px; text-align:left;">
    <div id="menu2" class="menuContent">
        <br/>
        <p>Func 1  / Func 2</p>
    <br/>
    </div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <br/>
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

CSS

#menu { background-color:#96f39f;}
#menu2 { background-color:#3CF;}

.menuContent    { position: absolute; display: none; }
div.element:hover .menuContent {display : block; width : 100%;}