JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div class="bh-sl-container">
  <div id="page-header">
    <h1 class="bh-sl-title">The Auditor Locator</h1>

  </div>

  <div class="bh-sl-form-container">
    <form id="bh-sl-user-location" method="post" action="#">
      <div class="form-input">
        <label for="bh-sl-address">Enter Address or Zip Code:</label>
        <input id="address" type="text" value="Danbury, CT" />
        <input type="button" value="Submit" onclick="codeAddress();" />
      </div>
    </form>
  </div>

  <table border="0" style="height:100%">
    <tr style="height:100%">
      <td style="height:100%">
        <div id="map"></div>
      </td>
      <td>
        <div id="side_bar" class='text'></div>
        <div id="panel" class='text'></div>
      </td>
    </tr>
  </table>


  <div id="info"></div>
  <div id="mdiv">
    <div class="mdiv">
      <div class="md">
      </div>
    </div>
  </div>

CSS

html,
 body,
 #map {
   margin: 0;
   padding: 0;
   height: 600px;
   width: 400px;
 }
 
 .text {
   width: 300px;
   height: 600px;
   background-color: white;
   overflow: scroll;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 #side_bar {
   z-index: 100;
   position: absolute;
   top: 135px;
   left: 400px;
 }
 
 #panel {
   z-index: -100;
   display: block;
   position: absolute;
   top: 135px;
   left: 400px;
 }
 
 #mdiv {
   z-index: 500;
   width: 25px;
   height: 25px;
   display: none;
   background-color: red;
   border: 1px solid black;
   position: absolute;
   left: 660px;
   top: 112px;
 }
 
 .mdiv {
   height: 25px;
   width: 2px;
   margin-left: 12px;
   background-color: black;
   transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   /* IE 9 */
   -webkit-transform: rotate(45deg);
   /* Safari and Chrome */
   z-index: 1;
 }
 
 .md {
   height: 25px;
   width: 2px;
   background-color: black;
   transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   /* IE 9 */
   -webkit-transform: rotate(90deg);
   /* Safari and Chrome */
   z-index: 2;
 }
 
 tr:nth-child(even) {
   background: #CCC
 }
 
 tr:nth-child(odd) {
   background: #FFF
 }
 
 .numberCircle {
   /* float: left; */
   border-radius: 50%;
   behavior: url(PIE.htc);
   /* remove if you don't care about IE8 */
   width: 18px;
   height: 18px;
   padding: 4px;
   margin: 0px;
   background: #fff;
   border: 2px solid #666;
   color: #666;
   text-align: center;
   font: 16px Arial, sans-serif;
 }

JavaScript

var locations = [
   ["John Doe", "29 Buhl Lane, East Northport, NY ", "40.858924, -73.297327", "http://maps.google.com/mapfiles/ms/icons/blue.png"],
   ["Jim Smith", "12 Williams Rd, Montvale, NJ ", "41.041599,-74.019554", "http://maps.google.com/mapfiles/ms/icons/green.png"],
   ["John Jones", "689 Fern St Township of Washington, NJ ", "40.997704,-74.050598", "http://maps.google.com/mapfiles/ms/icons/yellow.png"],

 ];
 // alert(locations.length);

 var geocoder = null;
 var map = null;
 var customerMarker = null;
 var gmarkers = [];
 var closest = [];
 var directionsDisplay = new google.maps.DirectionsRenderer();;
 var directionsService = new google.maps.DirectionsService();
 var map;

 function initialize() {
   // alert("init");
   geocoder = new google.maps.Geocoder();
   map = new google.maps.Map(document.getElementById('map'), {
     zoom: 9,
     center: new google.maps.LatLng(52.6699927, -0.7274620),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   });
   var infowindow = new google.maps.InfoWindow();
   var marker, i;
   var bounds = new google.maps.LatLngBounds();
   document.getElementById('info').innerHTML = "found " + locations.length + " locations<br>";
   for (i = 0; i < locations.length; i++) {
     var coordStr = locations[i][2];
     var coords = coordStr.split(",");
     var pt = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
     bounds.extend(pt);
     marker = new google.maps.Marker({
       position: pt,
       map: map,
       icon: {
         url: locations[i][3],
         labelOrigin: new google.maps.Point(15, 10)
       },
       address: locations[i][1],
       title: locations[i][0],
       html: locations[i][0] + "<br>" + locations[i][1] + "<br><br><a href='javascript:getDirections(customerMarker.getPosition(),&quot;" + locations[i][1] + "&quot;);'>Get Directions</a>"
     });
     gmarkers.push(marker);
     google.maps.event.addListener(marker, 'click', (function(marker, i) {
         return function() {
  ...