Bootstrap 5 Basic Form

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="accordion-body row g-3">
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top" title="xwalsh">
      <div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
      <div class="ms-2">
        <div class="fw-bold">
          <span>xwalsh</span>
          <span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
        </div>
        <div class="fs-small fw-bold text-success">
          <span class="me-2"> Sightseeing[ SS ] </span>
        </div>
        <div class="fst-italic fs-small ellipsis-2">Kabupaten Indramayu, Jawa Barat, Indonesia</div>
        <div class="fst-italic fs-small">[email protected]</div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top" title="rigoberto00">
      <div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
      <div class="ms-2">
        <div class="fw-bold">
          <span>rigoberto00</span>
          <span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
        </div>
        <div class="fs-small fw-bold text-success">
          <span class="me-2"> Sightseeing[ SS ] </span>
        </div>
        <div class="fst-italic fs-small ellipsis-2">Kota Pekanbaru, Riau, Indonesia</div>
        <div class="fst-italic fs-small">[email protected]</div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top"...

CSS

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
    background-color: #f0f0f0;
}

.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete .suggestions {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: 3;
    width: 100%;
}

.autocomplete .suggestions li {
    padding: 8px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    cursor: pointer;
}

.autocomplete .suggestions li:hover {
    background-color: #5db8fd;
}

.red-label {
    color: red;
}

/* Override Bootstrap styles for offcanvas backdrop */
.offcanvas {
    z-index: 99;
}
.offcanvas.offcanvas-start {
    width: 40% !important;
}

.offcanvas-backdrop {
    z-index: 90;
}

.navbar {
    z-index: 100;
    position: fixed;
    width: 100%;
}

.fs-small {
    font-size: 0.8em;
}

.fs-smaller {
    font-size: 0.5rem;
}

.search-container {
    position: absolute;
    top: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.search-container.center {
    left: 50%;
    transform: translateX(-50%);
}
.search-container.end {
    right: 10px;
}

.search-container > * {
    white-space: nowrap;
}

/* .search-container input, */
/* .search-container select {
    max-width: 200px !important;
    height: 30px !important;
} */

.result-item .img-thumb {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
    background-position: center;
    height: 122px;
    width: 100%;
}

.user-avatar {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
    background-position: center;
    height: 48px;
    width: 48px;
}

.result-item a {
    text-decoration: none;
}

#location-input {
    width: 300px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline:...