Make collapsing toggler be on the same line as textbox

I am creating a bootstrap5 website with a search form. I cannot get the form text box labelled "search by country" to be on vertically the same line as the collapsible hamburger toggler. I tried making the form display inline and d-inline-flex but this didnt help. So am trying to get the text box to be on the same line as the hamburger. So somthing like this:

<!Doctype html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
  <div class="row d-flex justify-content-center">
    <div class="col-md-10 bg-white search form">
    <form method="post" action="">

      <div class="col-md-2 p-3  py-4">                
        <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="advanced">
Hamburger
      </a>

        </div>
          <div class="col-md-4">
           <input type="text" class="form-control" placeholder="Search by Country">  
    </div>     
        <div class="collapse p-3" id="collapseExample">
      
        <div class="row">
        <div class="col-md-4">
          <input type="text" placeholder="Property ID" class="form-control">  
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control" placeholder="Search by MAP"> 
        </div>
         <div class="col-md-4">
           <input type="text" class="form-control" placeholder="Search by Country">  
        </div>        
      </div>
    </div>     
     
 </div>    

</form>
</div>          
</div>
</div>





<!-- Bootstrap5 JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
   
      
  </body>
</html>

Solution

You can give display: flex to the form, which should bring your textbox adjacent to the hamburger (Try running the below snippet).

<!Doctype html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
  <div class="row d-flex justify-content-center">
    <div class="col-md-10 bg-white search form">
    <form class="d-flex align-items-center" method="post" action="">

      <div class="col-md-2 p-3  py-4">                
        <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="advanced">
Hamburger
      </a>

        </div>
          <div class="col-md-4">
           <input type="text" class="form-control" placeholder="Search by Country">  
    </div>     
        <div class="collapse p-3" id="collapseExample">
      
        <div class="row">
        <div class="col-md-4">
          <input type="text" placeholder="Property ID" class="form-control">  
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control" placeholder="Search by MAP"> 
        </div>
         <div class="col-md-4">
           <input type="text" class="form-control" placeholder="Search by Country">  
        </div>        
      </div>
    </div>     
     
 </div>    

</form>
</div>          
</div>
</div>





<!-- Bootstrap5 JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
   
      
  </body>
</html>