JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topic_container">
    <input type="text" id="topics" />
    <div id="results">
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
    </div>
</div>

CSS

#results {
    display: none;
    height: 100px;
    overflow: scroll;
}
.result_row {
    cursor: pointer;
    border: 1px solid black;
}

JavaScript

$(document).on('click', '#topics', function() {
    popover('topics', 'results', 0);
});

$(document).mouseup(function (e)
{
    var topic_container = $("#topic_container");

    if (!topic_container.is(e.target) // if the target of the click isn't the container...
        && topic_container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $('#results').slideUp();
    }
});

function popover(element_id, div_id)
{
    var element_offset = $('#'+element_id).offset();
    $('#'+div_id).css({ top: element_offset.top, left: element_offset.left + $('#'+element_id).width()});
    var new_offset = $('#'+div_id).offset();
    $('#'+div_id).show();
}