JSFiddle - React, Tailwind, and code Playground

HTML

<div class="lblcol">How did you hear about us?</div>
    <div class="fldcol">
      <select name="howhear" size="1" id="howhearsel">
        <option>Web Site</option>
        <option>Other</option>
      </select>
    </div>
    <div class="clear"></div>
    <div id="howhearother">
      <div class="lblcol">Other:</div>
      <div class="fldcol"><input type="text" name="howhearother" size="50"/></div>
    </div>

CSS

.lblcol { float:left; width:190px }
      .fldcol { float:left }
      .clear { clear:both }
      #howhearother { margin-left: 190px; }
      #howhearother .lblcol { float:left; width: 60px }

JavaScript

$(document).ready(function() {

        otherShowHide();
        
        $("#howhearsel").change(otherShowHide);
        
      });

      function otherShowHide(event) {

        var el = $("#howhearsel")

        if (el.val().toLowerCase() == "other")
        { // show the "other" text box.
          if (!event) {
            $("#howhearother").show(); // from document.ready, so just show it.
          } else {
            $("#howhearother").slideDown(function() { // slide it down.
              $("#howhearother input").focus(); // this causes it to disappear in IE7.
            });
          }
        } 
        else 
        { // hide the "other" test box.
          if (!event) {
            $("#howhearother").hide(); // from document.ready, so just hide it.
          } else {
            $("#howhearother").slideUp(); // slide it up.
          }
        }

      };