I am working on a PHP project and implementing Algolia autocomplete to provide suggestions for categories, brands, and products. I want the autocomplete design to display categories and brands on the left side and product suggestions on the right side, similar to the design in this image

Here is my current JavaScript code for initializing Algolia and setting up the autocomplete:

<script type="text/javascript">
const ALGOLIA_APP_ID = 'my app id';
      const ALGOLIA_API_KEY = 'my key';
      const ALGOLIA_INDEX_NAME_1 = 'shop_PRODUCTS';
      const ALGOLIA_INDEX_NAME_2 = 'shop_CATEGORY';
      const ALGOLIA_INDEX_NAME_3 = 'shop_BRANDS';
      const ALGOLIA_PRODUCT_URL = '<?php echo base_url('product'); ?>/';
      const ALGOLIA_CATEGORY_URL = '<?php echo base_url('category'); ?>/';
      const ALGOLIA_BRAND_URL = '<?php echo base_url('products/brand'); ?>/';
      const ALGOLIA_IMAGE_PREFIX = '<?php echo CDN_LINK; ?>/cpanel/assets/uploads/product/';
// Initialize Algolia client
      const client = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_API_KEY);
      const index1 = client.initIndex(ALGOLIA_INDEX_NAME_1);
      const index2 = client.initIndex(ALGOLIA_INDEX_NAME_2);
      const index3 = client.initIndex(ALGOLIA_INDEX_NAME_3);

   autocomplete('#search-input', {}, [
        {
          source: autocomplete.sources.hits(index1, { hitsPerPage: 5 }),
          displayKey: 'prd_name',
          templates: {
              header: '<div class="suggestion-header"><h3 class="gcom__typeahead-results-heading"><span class="gcom__typeahead-results-heading-label">Suggestions</span></h3></div>',
            suggestion: function(suggestion) {
                return '<a class="atagproduct" href="'+ ALGOLIA_PRODUCT_URL + suggestion.prd_slug + '"><div class="suggestion-item">' +
                  '<img class="suggestion-image" src="'+ ALGOLIA_IMAGE_PREFIX + suggestion.prd_image + '" />' +
                  '<div class="sugges-text-column">' +
                 '<span class="suggestion-name">' + suggestion._highlightResult.prd_name.value + '</span>' +
                 '<span class="suggestion-description">' + suggestion._highlightResult.prd_description.value + '</span>' +
                 '</div>' +
                 '</div></a>';
            }
          }
        },
        {
          source: autocomplete.sources.hits(index2, { hitsPerPage: 5 }),
          displayKey: 'cat_title',
          templates: {
            header: '<div class="suggestion-header"><h3 class="gcom__typeahead-results-heading"><span class="gcom__typeahead-results-heading-label">Category</span></h3></div>',
            suggestion: function(suggestion) {
                  return '<a class="atagproduct" href="'+ ALGOLIA_CATEGORY_URL + suggestion.cat_slug + '"><div class="suggestion-item">' +
                 '<span class="suggestion-name">' + suggestion._highlightResult.cat_title.value + '</span>' +
                 '</div></a>';
            }
          }
        },
        {
          source: autocomplete.sources.hits(index3, { hitsPerPage: 5 }),
          displayKey: 'brd_title',
          templates: {
            header: '<div class="suggestion-header"><h3 class="gcom__typeahead-results-heading"><span class="gcom__typeahead-results-heading-label">Brands</span></h3></div>',
            suggestion: function(suggestion) {
                  return '<a class="atagproduct" href="'+ ALGOLIA_BRAND_URL + suggestion.brd_slug + '"><div class="suggestion-item">' +
                 '<span class="suggestion-name">' + suggestion._highlightResult.brd_title.value + '</span>' +
                 '</div></a>';
            }
          }
        }
      ]);
</script>

I want to achieve a layout where:

• Categories and brands appear on the left side.
• Product suggestions appear on the right side

Could anyone provide guidance on how to modify my code to achieve this layout? Any tips or examples would be greatly appreciated.