Javascript 如何调整下拉内容，使其不与其他元素重叠

document.querySelector('#mostrarMapaCheckbox').addEventListener('click', () => {
  var mapaContainer = document.getElementById("mapa");
  var notaInput = document.getElementById("nota");
  var checkbox = document.getElementById("mostrarMapaCheckbox");

  if (checkbox.checked) {
    mapaContainer.style.display = "block";
    notaInput.style.display = "block";
  } else {
    mapaContainer.style.display = "none";
    notaInput.style.display = "none";
  }
})

function seleccionarDireccion(elemento, direccion, ciudad) {
  var elementosDireccion = document.querySelectorAll('.direcciones-barracuda');
  elementosDireccion.forEach(function(elem) {
    elem.classList.remove('selected');
  });

  elemento.classList.add('selected');
  alert('Dirección seleccionada:\n' + direccion + '\n' + ciudad);
}

document.querySelector('#confirmarBtn', () => {
  alert("Pedido confirmado");
});

.direcciones-barracuda-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.direcciones-barracuda {
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  transition: border-color 0.3s;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.icono-ubicacion {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.direccion-info {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
}

.direccion-info span {
  display: block;
}

.direcciones-barracuda.selected {
  border-color: #E05228;
}

.mapa-container {
  display: none;
  padding: 10px;
}

#mostrarMapaContainer {
  clear: both;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

#direccionCompleta,
#referencia {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
}

#mapa {
  width: 100%;
  margin-top: 10px;
}

.nota-wrapper {
  display: flex;
  justify-content: space-between;
}

#nota {
  margin-top: 10px;
  width: 48%;
  box-sizing: border-box;
  padding: 10px;
}

#celular {
  width: 48%;
  box-sizing: border-box;
  padding: 10px;
}

#confirmarBtn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #E05228;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.foo {
  height: 200px;
  background-color: #f0f0f0;
  margin-bottom: 10px;
}

<div class="card" style="padding: 1rem;">
  <div class="table-wrapper">
    <span>Where do we send your order?</span>
    <div class="direcciones-barracuda-wrapper">
      <div class="direcciones-barracuda">
        <span>SOME TEXT</span>
      </div>
    </div>
    <div id="mostrarMapaContainer">
      <input type="checkbox" id="mostrarMapaCheckbox" />
      <label for="mostrarMapaCheckbox">New Adress</label>
      <div id="mapa" class="mapa-container">
        <input type="text" id="direccionCompleta" placeholder="Enter full address" />
        <div class="foo"></div>
        <input type="text" id="referencia" placeholder="References" />
        <div class="nota-wrapper">
          <input type="text" id="nota" placeholder="Notes" />
          <input type="text" id="celular" placeholder="Phone" />
        </div>
      </div>
    </div>
    <button class="" id="confirmarBtn">CONFIRM</button>
  </div>
</div>