Need to make search and close SVG icons at the same position?

I need to make the search icon and the close SVG icon appear at same position but failed to achieve this !

My site: https://softcroco.com/

Screenshots:

enter image description here

enter image description here

So, is there any solution to get the search and close SVG icons at same position when the user click on it?

My Code:

#submitSearchButton {
}

#searchInput {
flex-grow: 1;
padding: 15px 145px;
border: none;
width: 100%;
height: 19%important;
font-family: 'Poppins';
font-size: 18px;
}

#searchForm {
width: 100%;
height: 75%!important;
position: relative;
display: unset;
}

.search-container {
display: flex;
position: absolute; /* Change this */
width: 100%; /* Add this */
top: 0; /* Add this */
left: 0; /* Add this */
}

#openSearchButton, #closeButton {
padding: 6px!important!;
border: none!important;
cursor: pointer!important;
position: absolute!important;
background-color: transparent!important;
color: white!important;
position: absolute!important; /* Change this */
top: 60%!important;
transform: translateY(-50%)!important;
right: 92px!important;
display: flex!important;
align-items: center!important;
}

#openSearchButton:hover { color: #cccccc!important; } #openSearchButton svg { transition: color 0.2s ease-in-out!important; }

#submitSearchButton {
position: relative;
cursor: pointer;
top: -38px;
right: -97px;
border: none;
background: none;
}
#openSearchButton svg {
width: 1em;
height: 1em;
}
#closeButton svg {
width: 2.5em;
height: 1em;
}

#closeButton {
display: none;
color: white;
right: 0; /* Add this */
}

<nav class="navbar">
  <div class="search-container" id="searchContainer" style="display: none;">
    <form id="searchForm" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="GET">
      <input type="text" placeholder="Search For Apps or Games..." name="s" id="searchInput">
      <button type="submit" id="submitSearchButton">
        <!-- SVG icon code -->
        <svg viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" width="20" height="20"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg>
      </button>
    </form>
<button type="button" id="closeButton">
  <!-- SVG icon code -->
  <svg viewBox="0 0 512 512" aria-hidden="true" width="1em" height="1em">
    <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z" fill="black"></path>
  </svg>
</button>

  </div>
  <button type="button" id="openSearchButton">
    <!-- Add your search icon SVG code here -->
<svg viewBox="0 0 512 512" aria-hidden="true" width="1em" height="1em">
  <path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
</svg>
  </button>
  <!-- Other navigation items -->
</nav>

<script>
document.getElementById('openSearchButton').addEventListener('click', function() {
  document.getElementById('searchContainer').style.display = 'flex';
  this.style.display = 'none';
  document.getElementById('closeButton').style.display = 'block';
});

document.getElementById('closeButton').addEventListener('click', function() {
  document.getElementById('searchContainer').style.display = 'none';
  this.style.display = 'none';
  document.getElementById('openSearchButton').style.display = 'block';
});

document.getElementById('searchForm').addEventListener('submit', function(e) {
  const searchInput = document.getElementById('searchInput');
  const searchQuery = searchInput.value.trim();
  
  if (searchQuery === '') {
    e.preventDefault(); // Prevent the form from submitting if the search query is empty
  }
});
</script>

A lot of CSS edits without benefits!