JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="left">
    <div class="menu">
    Пункт меню<br>
    Пункт меню<br>
    Пункт меню<br>
    </div>
</div>
        
    <div class="main">
Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста. Всякий текст. Много текста.
</div>
        </div>

CSS

.wrapper {
    overflow: hidden;
    width: 340px;
}

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

.left {
    float:right;
    width:30px;
    height:200px;
    border:1px solid blue;
    background-color:blue;
    position: relative;
    z-index: 2;
}

.menu {
    display:none;
}

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

.left:hover {
     width:100px;
}

.left:hover + .main {
    margin-left: -70px;
}