Edit in JSFiddle

// Create a Leaflet map
const map = L.map('my-map').setView([48.1500327, 11.5753989], 15);
// Marker to save the position of found address
let marker;

// The API Key provided is restricted to JSFiddle website
// Get your own API Key on https://myprojects.geoapify.com
const myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

// Retina displays require different mat tiles quality
const isRetina = L.Browser.retina;
const baseUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}";
const retinaUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}";

// add Geoapify attribution
map.attributionControl.setPrefix('Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a>')

// Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
L.tileLayer(isRetina ? retinaUrl : baseUrl, {
  attribution: '<a href="https://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors',
  apiKey: myAPIKey,
  maxZoom: 20,
  id: 'osm-bright',
}).addTo(map);

// move zoom controls to bottom right
map.zoomControl.remove();
L.control.zoom({
  position: 'bottomright'
}).addTo(map);

function onMapClick(e) {

  if (marker) {
    marker.remove();
  }

  const reverseGeocodingUrl = `https://api.geoapify.com/v1/geocode/reverse?lat=${e.latlng.lat}&lon=${e.latlng.lng}&apiKey=${myAPIKey}`;
  
  // call Reverse Geocoding API - https://www.geoapify.com/reverse-geocoding-api/
  fetch(reverseGeocodingUrl).then(result => result.json())
    .then(featureCollection => {
      if (featureCollection.features.length === 0) {
        document.getElementById("status").textContent = "The address is not found";
        return;
      }

      const foundAddress = featureCollection.features[0];
      document.getElementById("name").value = foundAddress.properties.name || '';
      document.getElementById("house-number").value = foundAddress.properties.housenumber || '';
      document.getElementById("street").value = foundAddress.properties.street || '';
      document.getElementById("postcode").value = foundAddress.properties.postcode || '';
      document.getElementById("city").value = foundAddress.properties.city || '';
      document.getElementById("state").value = foundAddress.properties.state || '';
      document.getElementById("country").value = foundAddress.properties.country || '';

      document.getElementById("status").textContent = `Found address: ${foundAddress.properties.formatted}`;

      marker = L.marker(new L.LatLng(foundAddress.properties.lat, foundAddress.properties.lon)).addTo(map);
    });

}

map.on('click', onMapClick);

<div class="main">
  <div class="controls">
    <div class="results">
          <label for="name">Name:</label>          
          <input id="name" type="text" readonly />
          <label for="house-number">House number:</label>          
          <input id="house-number" type="text" readonly />
          <label for="street">Street:</label>          
          <input id="street" type="text" readonly />
          <label for="postcode">Postcode:</label>          
          <input id="postcode" type="text" readonly />
          <label for="city">City:</label>          
          <input id="city" type="text" readonly />
          <label for="state">State:</label>          
          <input id="state" type="text" readonly />
          <label for="country">Country:</label>          
          <input id="country" type="text" readonly />
    </div>
    <div class="status">
      <span id="status">Click on the map to query an address by coordinates</span>
    </div>
  </div>
  <div id="my-map"></div>
</div>

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

.main {
  display: flex;
  flex-direction: row;
}

.results {
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-width: 400px;
    max-width: 400px;
}

.status {
    padding: 10px;
    max-width: 400px;
}

#my-map {
  flex: 1;
}