I want to format my Google API autocomplete data

Question

I am using Google API for address search and I got it completely.

I tried to format the data using CSS and its look something like this:

Here is my CSS code:

.pac-container:after {
    /* Disclaimer: not needed to show 'powered by Google' if also a Google Map is shown */
    background-image: none !important;
    height: 0px;
} 
.pac-item-query
{
    color:red;
}
.pac-item
{
    padding:20px;   
}

but i want my address box to be looking like this

This is the code that call api and display result:

function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    callDebugger();
    autocomplete = new google.maps.places.Autocomplete(
    (
        document.getElementById('autocomplete')), {
        types: ['geocode'],
        componentRestrictions: countryRestrict
    });
    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
    document.getElementById('countrys').addEventListener(
        'change', setAutocompleteCountry);
    }

    function fillInAddress() {
        callDebugger();
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();
        var check = [];
        for (var component in componentForm) {

            document.getElementById(component).value = '';
            // document.getElementById(component).disabled = false;

        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
            callDebugger();

            var addressType = place.address_components[i].types[0];

            check.push(addressType);

            if (componentForm[addressType]) {

                var val = place.address_components[i][componentForm[addressType]];
                document.getElementById(addressType).value = val;
            }

        }
        // console.log(zipcode);
        zipcode = check.includes("postal_code");
        sessionStorage.setItem("zipcode", zipcode);
        // console.log(check);

    }

And this is HTML:

   <div class="form-field half">
          <label for="usr">Business Address</label>
          <input id="autocomplete" type="text" class="w-input" data-rule-required="true" name="address" placeholder="Address" onFocus="geolocate()" />
   </div>