JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div id="infopane">click on a marker</div>
<div id="map"></div>

CSS

#map {
    height: 360px;
    width: 49%;
}

#infopane {
  width: 49%;
  float: right;
  border: 0.2px solid #c0c0c0;
}

h2 {
  margin-top:0.1em;
  margin-left:0.1em;
  font-family: Arial, Helvetica, sans-serif;
}

JavaScript

var popupInhalt = {
	"Stadthalle" : "Ich bin ein ganz langer Text",
  "Bahnhof" : "Ich bin ein ganz langer Text, und habe noch viel mehr Inhalt",
}

var map = L.map("map").setView([50.67522, 9.45806], 14);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{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>'}
).addTo(map);


L.marker([50.67522, 9.45806]).bindPopup(popupInhalt["Stadthalle"]).addTo(map);
L.marker([50.68226, 9.46117]).bindPopup(popupInhalt["Bahnhof"]).addTo(map);