JSFiddle - React, Tailwind, and code Playground

HTML

<div class="map-box">

            <div class="map"></div>

            <div class="form-box" id="form">
                <div class="row">
                    <h2>We're happy to hear from you</h2>
                </div>

                <div class="row">
                    <form method="post" action="mailer.php" class="contact-form">

                        <div class="row">

                        </div>

                        <div class="row">

                            <div class="col span-1-of-3">
                                <label for="name">Name</label>
                            </div>
                            <div class="col span-2-of-3">
                                <input type="text" name="name" id="name" placeholder="Your name" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col span-1-of-3">
                                <label for="email">Email</label>
                            </div>
                            <div class="col span-2-of-3">
                                <input type="email" name="email" id="email" placeholder="Your email" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col span-1-of-3">
                                <label for="find-us">How did you find us?</label>
                            </div>
                            <div class="col span-2-of-3">
                                <select name="find-us" id="find-us">
                                    <option value="friends" selected>Friends</option>
                                    <option value="search">Search engine</option>
                                    <option value="ad">Advertisement</option>
                                    <option value="other">Other</option>
                                </select>
              ...

CSS

/* -----------------------------------------------
FORM
----------------------------------------------- */

.contact-form {
    width: 90%;
    margin: 0 auto;
}

input[type=text],
input[type=email],
select,
textarea {
    width: 100%;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

textarea {
    height: 100px;
}

input[type=checkbox] {
    margin: 10px 5px 10px 0;
}

*:focus {outline: none;}

.map-box {
    width: 100%;
    height: 630px;
    position: relative;
}

.map {
    width: 100%;
    height: 630px;
    position: relative;
    z-index: 0;
}

.form-box {
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    height: 630px;
    padding-top: 40px;
}

JavaScript

/* Maps */
    var map = new GMaps({
        div: '.map',
        lat: 38.7436266,
        lng: -9.05,
        zoom: 12
    });

    map.addMarker({
        lat: 51.3114178,
        lng: -0.45,
        title: 'Woking',
        infoWindow: {
            content: '<p>Our Woking locale</p>'
        }
    });

    map.addMarker({
        lat: 38.7436266,
        lng: -9.1602037,
        title: 'Lisbon',
        infoWindow: {
            content: '<p>Our Lisbon HQ</p>'
        }
    });