JSFiddle - React, Tailwind, and code Playground

HTML

<div class='a'> - Hey, cool stuff down here -
    <div class='c'>
        <div>I'm number one</div>
        <div>I'm number three hundred</div>
        <div>I'm number three hundred and three</div>
        <div>I'm number three hundred fifty seven, and I like cake</div>
    </div>
    <img src='https://ecommunities.belgium.be/ecomnlsupport/det-search_down-arrow.gif' />
</div>

CSS

div.a {
    position: relative;
    border: 1px solid black;
    color: silver;
    text-align: center;
    font: 14px Arial;
}
div.a img {
    position: absolute;
    top: 2px;
    right: 2px;
}
div.c div {
    text-align: left;
    color: black;
    display: inline-block;
    border-bottom: 1px solid black;
}
div.c div:hover {
    background-color: silver;
    cursor: pointer;
}
div.c div:last-child {
    border: none;
}
div.c div:first-child {
    border-top: 1px solid black;
}

JavaScript

var w = 0;
$('div', '.c').each(function() {
    if ($(this).width() > w) w = $(this).width();
})
$('div').each(function() {
    $(this).width(w)
});
$('div.c').hide();
$('div.a').width(w).hover(function() {
    $('div.c').slideDown(100);
},function() {
    $('div.c').slideUp(100);
});