Drop down menu in contact form behaving bizzarely

Question

I cannot post the code snippet here on Stackoverflow as it hits well past the limit of 30,000 characters so I have added it to jsfiddle as an alternative:

https://jsfiddle.net/c0ffee/n9ct2zms/1/

<!--====== Form Section ======-->
<section class="blog-area p-t-130 p-b-130">
    <div class="container-lg">
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-8">
                <div class="contact-form-area m-t-md-100">
                    <div class="common-heading tagline-boxed m-b-40">
                        <span class="tagline">Send Us Message</span>
                        <h2 class="title">Have Any Questions ? <br> Let’s Start to Talk</h2>
                    </div>
                    <div class="contact-form-v2">
                        <form>
                            <div class="input-field m-b-30">
                                <input type="text" id="firstName" placeholder="First Name" name="name" required="">
                                <label for="fullName">Required</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
                                <label for="phoneNumber">Required</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
                                <label for="phoneNumber">Business Name</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
                                <label for="phoneNumber">Phone Number</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="email" id="emailAddress" placeholder="Email Address" name="email" required="">
                                <label for="emailAddress">Email</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="subject" placeholder="I Would Like To Discuses " name="subject" required="">
                                <label for="subject">Subject</label>
                            </div>
                            <div class="input-field m-b-30">
                                <label for="cars">Choose a car:</label>

                                <select name="cars" id="cars">
                                  <option value="volvo">Volvo</option>
                                  <option value="saab">Saab</option>
                                  <option value="mercedes">Mercedes</option>
                                  <option value="audi">Audi</option>
                                </select>
                            </div>
                            <div class="input-field textarea-field m-b-30">
                                <textarea id="message" placeholder="Message" name="message"></textarea>
                            </div>

                            </div>
                            <div class="input-field">
                                <button type="submit" class="template-btn">Send Message <i class="fas fa-arrow-right"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--====== Form Section ======-->

The issue I am running into is that the dropdown menu doesn't list all the options and it seems like the options are hidden behind the other contact form elements and I am not sure why it is doing that.

Can anyone please take a look and advise as to what I am missing here?