JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footer">
<div class="contact">
    <div class="contact__item">Воронцово Поле</div>
    <div class="contact__item">Новая Басманная улица</div>
  </div>
  <div id="map"></div>
 
</div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

CSS

.footer {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.contact {
  padding: 20px 0;
  display: flex;
  align-items: center;
}

.contact__item {
  margin: 0 10px;
  cursor: pointer;
}

#map {
  width: 100%;
  height: 500px;
}

JavaScript

ymaps.ready(init);
    function init(){
      let map = new ymaps.Map("map", {
        center: [55.754243, 37.653774],
        zoom: 18
      });

      map.behaviors.disable('scrollZoom');

      let coords = [
          [[55.754243, 37.653774], 'улица Воронцово Поле, 11с1'],
          [[55.769909, 37.664599],'Новая Басманная улица, 29']
        ],
        marker = new ymaps.GeoObjectCollection({}, {
          iconLayout: 'default#image',
          iconImageSize: [30, 44],
          iconImageOffset: [-15, -44]

        });

      for (var i = 0; i < coords.length; i++) {
        marker.add(new ymaps.Placemark(coords[i][0],{
          balloonContentBody: coords[i][1]
        }));
      }
      map.geoObjects.add(marker);
    }