JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="container">
    <input type="text" id="menu" class="dropdown" data-drop="#dropdownlist" />
    <ul id="dropdownlist" class="list-group collapse dropdownlist" data-parent="#menu">
        <li class="list-group-item">Item1</li>
        <li class="list-group-item">Item2</li>
        <li class="list-group-item">Item3</li>
        <li class="list-group-item">Item4</li>
        <li class="list-group-item">Item5</li>
    </ul>
</div>

CSS

.dropdown {
    border: 1px solid grey;
    padding-left:14px;
    background-position:bottom right;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAVCAYAAAC33pUlAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wJFQ8LACtXLd4AAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAAT1JREFUSMftlL2KwlAQhb97E8VrOivBvIDvJNZ2QVALQRtJaylo5Qv4Aj6B76BgFyEoIsZAUjhbreyyZP3Z3WbJB9MMzDmcYRjI+ffs93um0ylhGCIit9psNkwmE6Ioypy1nzFZLBZcr1e22y3z+ZxWq0UYhiyXS5rNJqvVitPplKmhX0nX7/eJ45jL5fKpXyqVSNP0V8zkQ9FoNL70Xdel2+1mCqhHnXq9nmitqVQq7+tTjuPIYDAgTVPq9Tqe5yljDEqpnyWLogjLsojjmNlsBiDD4ZAkSW7rM8Z8q/FwsiAIxPd9HMehUChwPB45n88YY3Bdl06ngzFGAZnJ1DOHsdvtxPd9isUiWmuSJKFardJutymXy3e11LOXGASBjEYjbNumVqvhed4t0Z+wXq9lPB7L4XCQ/M3l5NzlDU1qiT+Rxr6tAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
}
.list-group-item {
    width: auto;
    display: table;
    overflow: hidden;
}
.list-group-item:first-child, .list-group-item:last-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.list-group-item {
    padding-top:3px;
    padding-bottom:3px;
}

JavaScript

var menuTarget

$(document).ready(function () {

    $('body').click(function () {
        $('.dropdownlist').hide();
    });

    $('.dropdown').on('click', function (event) {
        var dest = $(this).attr('data-drop');
        $(dest).fadeIn();
        return false;
    }).prop('readonly', 'readonly');

    $('.list-group-item').click(function () {
        var parent = $(this).parent()
        var dropdown = $(parent.attr("data-parent"));
        dropdown.val($(this).text())
    });

    $('.list-group-item').each(function () {
        var parent = $(this).parent()
        var dropdown = $(parent.attr("data-parent"));
        $(this).css('width', dropdown.outerWidth() + 'px')

    });


});