Hamburger menu appearing in the centre of the mobile screen of BS5 - html

Question

I'm using BS5 and got this working for desktop screen sizes but when it comes to mobile screens, everything goes for a toss!
What I want on mobile screen by keeping the Desktop view as-is:
The search button to be shown next to the hamburger menu instead of showing inside in the dropdown when hamburger menu is clicked.
The hamburger menu is to be shown next to the Search button instead of in the middle.
When I change the DIV positions, more problems come out.
JSFiddle Demo
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<header class="menu">
<nav class="navbar navbar-expand-sm">
<div class="container">
<a class="navbar-brand" href="/">
Logo
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul id="menu-main-menu-1" class="navbar-nav">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7">Sample Page</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8">Uncategorized</li>
</ul>
</div>
<div class="search">
<a data-bs-toggle="offcanvas" href="#demo">SEARCH</a>
</div>
</div>
</nav>
<div class="offcanvas offcanvas-top" id="demo">
<div class="container">
<div class="row">
<div class="col-lg-11 col-11">
<section id="block-9" class="widget_block">
<div class="wp-container-1 wp-block-group">
<div class="wp-block-group__inner-container">
<form role="search" method="get" action="/" class="wp-block-search__no-button alignleft wp-block-search"><label for="wp-block-search__input-1" class="wp-block-search__label screen-reader-text">Search</label>
<div class="wp-block-search__inside-wrapper"><input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="s" value="" placeholder="Search..." required=""></div>
</form>
</div>
</div>
</section>
</div>
<div class="col-lg-1 col-1">
<button type="button" class="float-end btn-close mt-2" data-bs-dismiss="offcanvas"></button>
</div>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>