Display items below Input field Selectize.js

Question

I am relatively new to using Selectize and was wondering if it was possible to display the selected item(s) below the search field.. something similar to this... Desired Style

My existing code is as follows:-

HTML

<div class="col-md-8 col-12">
                    <select class=form-control asp-for=CountryIds asp-items=Model.Countries data-val-required-hidden></select>
                </div>

JS

let countryPage = {
    setup:{

        let selectize = $("#CountryIds").selectize({
            placeholder: "Or search for another country",
            highlight: true,
            openOnFocus: false,
            closeAfterSelect: true,
            render: {
                item: function (item, escape) {
                    return ('<div class="btn btn-country">' + item.text + ' <i class="bi bi-x-circle-fill icon-c"></i></div>');
                }
            },
            onItemAdd: (value, $item) => countryPage.bindCountry(value, $item),
            onChange: (value) => {
                $("#CountryIds").valid();
            }
        })[0].selectize;

        selectize.$control.on('mousedown', function () {
            selectize.close();
        });

        selectize.on('type', function (e) {
            if (selectize.$control_input.val().length <= 1) {
                selectize.close();
            }
        });

        $(".selectize-input .btn-country").each(function () {
            countryPage.bindCountry($(this).data("value"), $(this));
        });

        selectize.on('item_add', function (value) {
            let valueWithoutPrefix = value.replace('country-', ''); 
            let $item = $('[data-destination][value=\'' + valueWithoutPrefix + '\']');

            if ($item.length > 0) {
                $item.prop('checked', true);
            }
        });

        selectize.on('item_remove', function (value) {
            let valueWithoutPrefix = value.replace('country-', ''); 
            let $item = $('[data-destination][value=\'' + valueWithoutPrefix + '\']');

            if ($item.length > 0) {
                $item.prop('checked', false);
            }
        });

        $('[data-destination]').on('change', function (e) {
            let countrysSelectize = $("#CountryIds")[0].selectize;
            let $this = $(this);
            let value = "country-" + e.currentTarget.value;

            if ($this.is(':checked')) {
                countrysSelectize.addItem(value);
                countryPage.bindCountry(value, $this);
            }
            else {
                countrysSelectize.removeItem(value);
            }
        });
    },
    bindCountry: (value, $item) => {
        let countrysSelectize = $("#CountryIds")[0].selectize;
        $item.find("i").click(function () {
            countrysSelectize.removeItem(value);
            countrysSelectize.focus();
        });
    }
}

Any help would be greatly appreciated.

I've tried creating a second selectize below the original and populating it but this didn't work.

I've also searched extensively online but no-one seems to have a solution.