SPFx extension(application customize) for now only has 2 place holder top and bottom. If you want to add html to any other place you would have to use custom javascript only.
The way you did it using content editor webpart might not work because, webpart would be only available on single page. I would suggest you to do following
- Create a custom javascript file, in this js file - add your javascript code which add elements below search bar.
- Create SPFx extension to add reference to custom js file using application customizer.
Please note that you have to modify this code a bit to add it to top section or bottom section.
Ref link - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions
var customjs = document.createElement("SCRIPT");
customjs.setAttribute("id","customjs");
customjs.setAttribute("type","text/javascript");
customjs.setAttribute("src", site absolute url + "/SiteAssets/js/Custom.js");
document.getElementsByTagName("body")[0].appendChild(customjs);
- Add this SPFx extension to app catalog and install on your target site. You should see custom.js file being loaded on every page load and your code will take care of adding elements below search bar.