JSFiddle - React, Tailwind, and code Playground

HTML

<div id="deadlinea" class="grid-12-12 clear">
                  <label><strong>5.</strong> Do you have a specific deadline for your project?<em class="formee-req"></em></label>
                   <select id="select_deadline">
                      <option>Please select one</option>
                      <option>NO</option>
                      <option>YES</option>
                  </select>
          </div>
         
          <div id="DeadlineArea">
                  <div id="deadline" class="grid-12-12 clear">
                        <label>What is the deadline for your project?<em class="formee-req"></em></label>
                       <input type="text" value="" />
                  </div>
          </div>

JavaScript

// Beginning of function

  $(document).ready(function(){

                  // Hides the area initially 

                  $("#DeadlineArea").hide();

  
                  // Beginning of slide code

                  $('#select_deadline').change(function() {
  
                                  // If yes selected
                                  if ($(this).val() == 'YES') {
  
                                  // Initiate slide down on hidden box   
                                             $("#DeadlineArea").slideDown('slow');
  
                                  // Otherwise
                                  } else { 
  
                                  // Initiate slide up of hidden box
                                  $("#DeadlineArea").slideUp('slow');
                                      
                                   // Clear the value if hidden again
                                  $("#DeadlineArea input").val("");

                                  }
                  }); 
                  // End of slide code

  });
  // End of function