JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class="ginput_container">
    <label for="input_1_4">Select option</label>
    <select class="medium gfield_select" id="input_1_4" name="input_4" tabindex="15">        
        <option value="0">None</option>
        <option value="155">1-70</option>
        <option value="185">71-250</option>
        <option value="*">Enter value</option>
      </select>
      <div>
          <label class="hidden-label" for="input_1_4_other">Other value</label>
          <input class="holder" id="input_1_4_other" style="display:none;" name="input_1_4_other" placeholder="None" type="text" />
     </div>
</div>

CSS

.ginput_container{
	position:relative;
}
.ginput_container select {
    width:47%;
}

.hidden-label {
    text-indent: -9999em;
}

.holder {
    margin-left: 1em;
    width:40%;
}

JavaScript

jQuery(".gfield_select").change(function() {
        var $this = jQuery(this);
        var val = $this.val();
        var holder = $this.parent().find('.holder');
        if (val === "*"){
            holder.val('');          
            holder.show();
            holder.focus();
        } else {           
            holder.val(this.options[this.selectedIndex].text);
            //holder.attr('disabled', 'disabled');
             holder.hide();
        }
});