JSFiddle - React, Tailwind, and code Playground

HTML

Foo
<dl class="productlist">
    <dt><a href="#" id="link0" class="product-link">Caviar</a></dt>
    <dd id="boxlink0">Some text for the first link</dd>
    <dt><a href="#" id="link1" class="product-link">Athena</a></dt>
    <dd id="boxlink1">Some text for the second link</dd>
    <dt><a href="#" id="link2" class="product-link">Knot</a></dt>
    <dd id="boxlink2">Some text for the third link</dd>
    <dt><a href="#" id="link3" class="product-link">Brooke Leaf</a></dt>
    <dd id="boxlink3">Some text for the fourth link</dd>
</dl>
Bar

CSS

.productlist {
    margin-bottom: 1.5em;
    position: relative;
}
.productlist dd {
    display: none;
    position: absolute;
    margin-left: 0;
    bottom: -1.5em;
    height: 1.5em;
}
.productlist > dt:hover + dd {
    display: block;
}