JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста.
</div>

<div class="left">
    <div class="menu">
    Пункт меню<br>
    Пункт меню<br>
    Пункт меню<br>
    </div>
</div>

CSS

.main {
    float:left;
    width:300px;
    height:200px;
    margin-right:5px;
    border:1px solid black;
}

.left {
    float:left;
    width:30px;
    height:200px;
    border:1px solid blue;
    background-color:blue;
}

.menu {
    display:none;
}

.left:hover .menu {
    display:block;
    width:100px;
}

.left:hover {
     width:100px;
}