JSFiddle - React, Tailwind, and code Playground

by oceog

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:161px;
    float:left;
    position: relative;
}
.item {        
    width:160px;
    height: 230px;
    display:block;
    border:1px solid gray;
}
.info {
    position: absolute;
    background: white;
    top:0;
    left: 160px;
    display:none;
    float:right;
    width:60px;
    height:230px;
    border:1px solid gray;
    z-index: 100;
}
.items:hover .info  {
    display:block;
}