JSFiddle - React, Tailwind, and code Playground

by Kris Tyte

HTML

<form>
  <h2>Family Information</h2>
  <div class="ic" id="c_family_name">
  <label for="family_name">Family Name<span class="red">*</span></label><span class="example">&nbsp;&nbsp;ex: Jones Family</span><br>
    <input type="text" id="family_name" name="family_name" minlength="2" maxlength="64" required="true">
  </div>

  <div class="ic" id="c_address">
    <label for="address">Address<span class="red">*</span></label><span class="example">&nbsp;&nbsp;Note: write &quot;No Current Address&quot; if applicable</span><br>
    <textarea id="address" name="address" rows="3" minlength="4" maxlength="128" required="true"></textarea>
  </div>

  <div class="ic" id="c_email">
    <label for="email">Email Address<span class="red">*</span></label><br>
    <input type="email" id="email" name="email" minlength="6" maxlength="128" required="true">
  </div>

  <div class="ic" id="c_phone">
    <label for="phone">Phone, including area code<span class="red">*</span></label><span class="example">&nbsp;&nbsp;ex: (704) 574-9605 ext.5524</span><br>
    <input type="text" id="phone" name="phone" minlength="10" maxlength="32" required="true">
  </div>
  
  <div class="ic" id="c_referral">
    <label for="name">Please indicate what organization referred you to this form.<span class="red">*</span></label><br>
    <input type="text" id="name" name="name" minlength="2" maxlength="32" required="true">
  </div>
  
  <div class="ic" id="c_need_suppliesYN">
    <label>Do you need any immediate household supplies?<span class="red">*</span></label>
    <div>
      <input type="radio" id="need_suppliesY" name="need_suppliesYN" value="Yes"><label for="need_suppliesY">Yes</label>
    </div>
    <div>
      <input type="radio" id="need_suppliesN" name="need_suppliesYN" value="No" checked><label for="need_suppliesN">No</label>
    </div>
  </div>
  
  <div id="if_supplies_needed">
  </div>
  
  <div class="ic" id="c_fm">
    <table>
      <tr><td>Name</td><td>Date of Birth</td></tr>
    </table>
 ...

CSS

h2 {
  color: #F2F1EF;
  text-align: center;
}

div {
  margin: 0;
  padding: 0;
}

form {
  padding: 4px;
  background-color: #697184;
  max-width: 640px;
  margin: auto;
}

.red {
  color: red;
  font-size: 0.8rem;
}

.example {
  color: grey;
  font-size: 0.75em;
  font-style: italic;
}

.ic { /* input container */
  padding: 10px;
  margin: 8px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  overflow: hidden;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: black;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background-color: #eaeaea;
}

.if_supplies_needed {
  display: hidden;
}

input[type=text], input[type=email], textarea, select {
  width: 100%;
  border: 1px solid #eaeaea;
}

textarea {
  height: 3rem;
}

#supplies_needed {
  height: 5rem;
}

JavaScript

$(document).ready(function() {
  $('input[name="need_suppliesYN"]').change(function() {
    if (this.value == "Yes") {
      $('#if_supplies_needed').removeClass("hidden").addClass("visible ic").html('<label for="supplies_needed">Detailed list of the supplies needed immediately<span class="red">*</span></label><br><textarea id="supplies_needed" name="supplies_needed" rows="3" minlength="2" maxlength="1024" required="true"></textarea>');
    } else {
      $('#if_supplies_needed').removeClass("visible ic").addClass("hidden").html("");
    }
  });
});