JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
   <div class="polozka">
      <div class="zalozka"><a href="#">Položka A</a></div>
         <div class="ramecek">
            <div class="telo">
               <p><img alt="" src="smile.jpg" />TEXT</p>
               <p>TEXT TEXT</p>
            </div>
         </div>
      </div>
   
   <div class="polozka">
      <div class="zalozka"><a href="#">Položka B</a></div>
         <div class="ramecek">
<div class="telo">
<p><img alt="" src="" />TEXT </p>
<p>TEXT </p>
</div>
</div>
</div>
</div>

CSS

#menu 
{
background: red;
position: relative;
top: 20;
left: 20;
height: 90%; 
width: 90%; 
}
#menu .polozka
{
float: none; 
    position: relative;
}
#menu .zalozka
{
width: 150px; 
background: green;
margin: 0 0 0 0;
padding: 0;
font-size: 20px;
}
#menu .zalozka a
{
color: white; 
text-decoration: none;
}
#menu .ramecek
{
position: absolute;
top: 0px; 
left: 150px;
width: 600px; 

padding: 10px; 
visibility: hidden; 
background: #000000; 
}
#menu .telo
{
overflow: auto; 
height: 150px;
background: orange;
padding: 5px 5px; 
text-align: justify; 
}
#menu .telo img
{
float: right;
margin: 0 1em .5em 0;
border: solid #666 1px;
}

#menu .polozka
{
behavior: url(hovermenu.htc); /* IE */
}

#menu .polozkaHover .ramecek,
#menu .polozka:hover .ramecek
{
visibility: visible;
}

#menu .polozkaHover .zalozka,
#menu .polozka:hover .zalozka
{
background: #caf;
}