JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://www.thasler.com/leaflet.geodesic/leaflet.css">
<script src="https://www.thasler.com/leaflet.geodesic/leaflet.js"></script>
<script src="https://www.thasler.com/leaflet.geodesic/Leaflet.Geodesic.js"></script>
<div id="map"></div>

CSS

body {
			    padding: 0;
			    margin: 0;
		    }
		    html, body, #map {
			    height: 100%;
		    }	
		    .info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		    }
		    .info h4 {
			padding-right: 5px;
			margin: 0 0 5px;
		    }

JavaScript

var map = L.map('map').setView([52, -30], 2);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
	maxZoom: 15,
	noWrap: true,
	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
	'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
	'Imagery © <a href="http://mapbox.com">Mapbox</a>',
	id: 'examples.map-zr0njcqy'
}).addTo(map);		
		
var berlin = new L.LatLng(52.5, 13.35); 
var losangeles = new L.LatLng(33.82, -118.38);

var A = L.marker(losangeles, {draggable: true}).addTo(map);
var B = L.marker(berlin, {draggable: true}).addTo(map).bindPopup("Drag me.").openPopup();
		
var Geodesic = L.geodesic([[A.getLatLng(), B.getLatLng()]], {
	weight: 7, 
	opacity: 0.5,
	color: 'blue',
	steps: 50
}).addTo(map);
		
var info = L.control();
info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); 
    this.update();
    return this._div;
};
		
info.update = function (props) {
    this._div.innerHTML = '<h4>Distance</h4>' +  (props ? (props.distance>10000)?(props.distance/1000).toFixed(0)+' km':(props.distance).toFixed(0)+' m' : 'invalid');
};
info.addTo(map);		
		
Geodesic.update = function () {
  var pathproperties = Geodesic._vincenty_inverse(A.getLatLng(), B.getLatLng());  
  info.update(pathproperties);
  var halfway_distance = pathproperties.distance * 0.5;
  var halfway_position = Geodesic._vincenty_direct(A.getLatLng(), pathproperties.initialBearing, halfway_distance);  
  Geodesic.setLatLngs([[A.getLatLng(), L.latLng(halfway_position.lat, halfway_position.lng)]]);
};
		
Geodesic.update();
		
A.on('drag', Geodesic.update);
B.on('drag', Geodesic.update);