JSFiddle - React, Tailwind, and code Playground

HTML

<!-- map -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        


        <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7NVmbB57RXQMycD2aKDsKSvoCdWR8w-4&callback=initMap&autocomplete=on&libraries=places">
        </script>

        
    <body>
    <center>
        <div class="map-page">

            <div id="input-form" class="service col-sm-3 input-form">
               
                <form>
                    <div class="inner-addon left-addon">
                        <i class="fa  fa-map-marker"></i>
                        <input id="origin-input" type="text" class="form-control" placeholder="From" />
                    </div><br/><br/>
                    <div class="inner-addon left-addon">
                        <i class="fa  fa-map-marker"></i>
                        <input id="destination-input" type="text" class="form-control" placeholder="To" />
                    </div>
                    <br/><br/>
                    <div>
                        <button class="btn btn-toggle" id="NOW" onclick="selectDateTime(this.id)">NOW</button>
                        <button class="btn btn-toggle" id="LATER" onclick="selectDateTime(this.id)">LATER</button>
                    </div>
                    <br/>
                    <div id="now_later" > </div>
                    <button class=" btn btn-primary" onclick="handleMap()">SUBMIT</button>
                    <script>
                        function selectDateTime(elemId)
                        {
                            var html = '';
                            if (elemId == "NOW") {
                                html += '<div class="btn-group btn-group-justified" id="within_now">';
                                html += '<div class="btn-group" >';
                                html += '15 Min <input type="radio" name="within_min" id="within_min" value="15">&nbsp;&nbsp;&nbsp;';
      ...

CSS

#map {
                width: 60%;
                height: 450px;
                /*                background-color: grey;*/
            }
            .input-form{
                width: 40%;
                height: 450px;
            }
            
            .inner-addon { 
    position: relative; 
      
}

.form-control{
    height:45px;
    font-size: 16px;
}

/* style icon */
.inner-addon .fa{
  position: absolute;
  padding: 9px;
  pointer-events: none;
  
}

/* align icon */
.left-addon .fa { left:  0px;
font-size: 30px;
}
/*.right-addon .glyphicons .fa { right: 0px;}*/

/* add padding  */
.left-addon input  {padding-left:  40px; }
/*.right-addon input { padding-right: 30px; }*/

.btn-primary{
    width:100%;
    font-size: 20px;
    font-weight: bold;
    padding: 4px;
    margin-top: 15px;
    
}

JavaScript

// Note: This example requires that you consent to location sharing when
                // prompted by your browser. If you see the error "The Geolocation service
                // failed.", it means you probably did not give permission for the browser to
                // locate you.
                function initMap() {
                    
                     var origin_input = document.getElementById('origin-input');
                    origin_input.value = '';
                    var destination_input = document.getElementById('destination-input');
                    destination_input.value = '';
                    
                     /* Set autocomplete on textboxes */
                    var autocompleteOrigin;
                    var autocompleteDest;
                    var map = null;
                    map = new google.maps.Map(document.getElementById('map'), {
                        center: {lat: 20.5937, lng: 78.9629},
                        zoom: 8});
                    var infoWindow = new google.maps.InfoWindow({map: map});

                    // Try HTML5 geolocation.
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(function(position) {
                            var pos = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            };

                            infoWindow.setPosition(pos);
                            infoWindow.setContent('Location found.');
                            map.setCenter(pos);
                        }, function() {
                            handleLocationError(true, infoWindow, map.getCenter());
                        });
                    } else {
                        // Browser doesn't support Geolocation
                        handleLocationError(false, infoWindow, map.getCenter());
                    }
                   ...