JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
    <div class="item">
        <h1>заголовок</h1>
    </div>
    <div class="info">
        Доп. Инфо
    </div>
</div>
<div class="items">
    <div class="item">
        <h1>заголовок</h1>
    </div>
    <div class="info">
        Доп. Инфо
    </div>
</div>

CSS

.items {
    width:224px;
    float:left;
}
.item {
    width:160px;
    height: 230px;
    display:block;
    border:1px solid gray;
    float:left;
}
.info {
    display:none;
    float:right;
    width:60px;
    height:230px;
    border:1px solid gray;
}
.item:hover~.info,.info:hover  {
    display:block;
}