JSFiddle - React, Tailwind, and code Playground

HTML

<p>
   <span style="color: red; text-decoration: underline;">Fourr</span>
   <span class="suggestions" style="display: none;">Fore Furor Furry Fourier Four Farr Fora Fury
   Fours Fire Firer Fuhrer Fiori Fourth Dourer Fouler Foyer Fayre Fairer Fr Flour Fort Furrow  
   Purr</span> guys went to 
   <span style="color: red; text-decoration: underline;">watc</span>
   <span class="suggestions" style="display: none;">WAC Wac Wat watch Watt watt WATS</span>
   movie yesterday.
</p>

CSS

.suggestions-list{
    display:none;
    width: auto;
    white-space: nowrap;
    padding: 20px;
    list-style: none;
    position: absolute;
}
.suggestions-list li{
    margin: 5px 0;
}

JavaScript

var $curSpan;

$('span').not('.suggestions').click(function(){
     $curSpan = $(this);
     $curSpan.next('.suggestions-list').toggle().css({
         left: $curSpan.position().left + 'px',
         top: $curSpan.position().top + 'px'
     });
 })
 
 $('.suggestions').each(function(){
     var arr = $(this).text().split(' ');
     var str = "<ul class='suggestions-list'>"
     for (var i = 0; i < arr.length; i++){
         str+= "<li>" + arr[i] + "</li>";
     }
     str+= "</ul>";
     var $that = $(str);
     $that.insertAfter($(this));
     $(this).remove();
 })
 
 $('.suggestions-list li').on('click', function(){
    $curSpan.text($(this).text());
    $(this).parent().hide();
 });