JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<form>
    <label>Distance:</label> <input type="text" size="40" name="dist"><br>
    <label>Price:</label> <input type="text" size="40" name="price">
</form>
    
<div id="map"></div>

CSS

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

#map {
    margin-top: 10px;
    width: 500px;
    height: 500px;
}

JavaScript

function init() {
    var myMap = new ymaps.Map('map', {
            center: [58.397506, 43.013986],
            zoom: 9,
            type: 'yandex#map',
            behaviors: ['scrollZoom', 'drag'],
            controls: []
        }),
        
        myGeoObject = new ymaps.GeoObject({
        });

    myMap.geoObjects
        .add(myGeoObject)
        .add(new ymaps.Placemark([58.397506, 43.013986], {
            balloonContent: '<strong>Address 1</strong>'
        }, {
            preset: 'islands#icon',
            iconColor: '#0095b6'
        }))
        .add(new ymaps.Placemark([58.446524, 43.432915], {
            balloonContent: '<strong>Address 2</strong>'
        }, {
            preset: 'islands#dotIcon',
            iconColor: '#0095b6'
        }));

        searchStartPoint = new ymaps.control.SearchControl({
            options: {
                useMapBounds: true,
                noPlacemark: true,
                noPopup: true,
                placeholderContent: 'Start point',
                size: 'large'
            }
        }),
        searchFinishPoint = new ymaps.control.SearchControl({
            options: {
                useMapBounds: false,
                noCentering: false,
                noPopup: true,
                noPlacemark: true,
                placeholderContent: 'Finish point',
                size: 'large',
                float: 'none',
                position: { left: 10, top: 44 }
            }
        }),
        calculator = new DeliveryCalculator(myMap, myMap.getCenter());

    myMap.controls.add(searchStartPoint);
    myMap.controls.add(searchFinishPoint);

    searchStartPoint.events.add('resultselect', function (e) {
        var results = searchStartPoint.getResultsArray(),
            selected = e.get('index'),
            point = results[selected].geometry.getCoordinates();

        calculator.setStartPoint(point);
    })
        .add('load', function (event) {
            if (!event.get('skip') &&...