JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ajax-search">
    <ul>
        <li class="ajax-search-result">
            <a href="#">
                <span class="title">Result #1</span>
                Medium length description</a>
        </li>
        <li class="ajax-search-result">
            <a href="#">
                <span class="title">Result #2</span>
                Short description</a>
        </li>
        <li class="ajax-search-result">
            <a href="#">
                <span class="title">Result #3</span>
                A really really long description...</a>
        </li>
    </ul>
</div>

CSS

#ajax-search { position: absolute; top: 50px; right: 155px; max-width: 350px; border: 1px solid #C7C7C5; box-shadow: 0 3px 10px #C7C7C5; }
#ajax-search ul li { display: block; }
#ajax-search ul li a {  display: block; padding: 9px 18px;/* min-width: 150px;*/ }
#ajax-search ul li a:hover { text-decoration: none; }
#ajax-search ul li.ajax-search-result a:hover { background-color: red; }
#ajax-search ul li.ajax-search-result span.title { display: block; color: inherit; }