JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-lg-12">
            <label>Preferred Method of Contact</label>
            <select id="contact-method-menu" name="contact-method-menu" required>
              <option value="">Select</option>
              <option value="Phone">Phone</option>
              <option value="Email">Email</option>
            </select>
          </div>

          <div class="contact-phone-option">
            <div class="col-lg-6">
              <label>Phone</label>
              <input id="contact-phone" name="contact-phone" value="" pattern="^\(?\d{3}\)?[- .]?\d{3}[- .]?\\
d{4}$" type="tel" required/>
            </div>
            <div class="col-lg-6">
              <label>Best Time to Call</label>
              <input id="contact-time" name="contact-time" value="">
            </div>
          </div>
          
          <div class="col-lg-12 contact-email-option">
            <label>Email</label>
            <input id="contact-email" name="contact-email" value="" required type="email">
          </div>

JavaScript

// Contact Form Dropdown menu                                                                                    
    $('.contact-phone-option, .contact-email-option').hide();
    $('#contact-method-menu').change(function () {
        if ($('#contact-phone').is(':selected')) {
            $('.contact-phone-option').show();
            $('.contact-email-option').hide();
        }
        if ($('#contact-email').is(':selected')) {
            $('.contact-email-option').show();
            $('.contact-phone-option').hide();
        }
    });