gap: 10px только он не во всех браузерах работает https://caniuse.com/?search=gap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
</head>
<body>
<div id="city"></div>
<div id="region"></div>
<div id="country"></div>
</body>
</html>window.onload = function () {
const o = ymaps.geolocation;
document.getElementById("city").innerHTML = o.city;
document.getElementById("region").innerHTML = o.region;
document.getElementById("country").innerHTML = o.country;
}top прижми к блоку со стрелкой, а чтобы он имел эффект выпадения, нужно прописать скрипт, который рассчитает высоту блока с товарами, а самому блоку с товарами по дэфолту в стилях задать ovevrflow: hidden; height: 0; попробуй