JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name='search_term' id="search_term" class="searchFunction">
<input id="addButton" type="button" value="Add">
<div class="dropdown">
    <ul class="result"></ul>
</div>
<div class="selectedStuff"></div>
<div id="markx"></div>

CSS

.selectedStuff > div{
    width:500px;
    display: table-row;
}

.close{
display: table-cell; 
 font-family: Arial;
    color: red;
    position:relative;
    right:-20px;
}

.bar{
  background-color: yellow;
            width: 400px;
            margin-top: 10px;
            border-style: solid;
            border-color: #0000ff;
            display: table-cell;
            
            
            }

/*.selectedStuff > div:after{
    content:" x ";
    font-family: Arial;
    color: red;
    position:relative;
    float:right;
    right:-20px;
}*/

JavaScript

$( document ).ready( function() {
    $('.searchFunction').keyup( function( event ) {
        var search_term = $("#search_term").val();

        $.post( document.location.href, { search_term:search_term }, function( data ) {
            $('.result').html( data );    
            });
        });

        $('.result').on('click', 'li', function( event ) {
            var result_value = $(this).text();
                $('#search_term').val(result_value);
                    $('.result').html('');
                });

        $('#addButton').on('click', function( event ) {
            var searchedValue = $('#search_term').val(); 
            var divHolder = $('.selectedStuff'); 
        $("<div ><div class='bar'>" + searchedValue + "</div><div class=\"close\">X</span></div>").css({
            
            }).appendTo(divHolder); 

         $('.close').on("click", function() {
  				$(this).parent().remove();
});
        });
        });