<p><button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-search" aria-expanded="false" aria-controls="navbarSearch">
  <i class="bi bi-search"></i> <!-- Bootstrap Icon -->
</button> <button class="btn-close float-end" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-search" aria-label="Close"></button>&nbsp;<style type="text/css">
.navbar-search {
  position: absolute;
  right: 1rem;
  top: 60px; /* adjust based on your header */
  z-index: 1050;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  padding: 0.5rem;
  width: 300px;
}
.navbar-search.collapse.show {
  display: inline-block !important;
}
</style></p>