JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tbody>
<tr>
  <td>Full Name:</td>
  <td><input type="text" class="text_field name" id="name"/></td>
  <td class="col-help name" width="200">what is your name</td>
</tr>
<tr>
  <td>Password:</td>
  <td><input type="text" class="text_field" id="password" /></td>
  <td class="col-help">Type a strong password...</td>
</tr>
</tbody>
</table>

CSS

.focusField{  
    border:solid 2px #333;  
    background:lightyellow;   
}  
.idleField{  
     background:#fff;  
     border: solid 1px #DFDFDF;  
}  
input.text_field {
    -moz-border-radius: 5px 5px 5px 5px;
    border: 1px solid #DDDDDD;
    font-size: 14px;
    margin: 0;
    padding: 8px;
    width: 200px;
}
input.text_field.with_box {
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-topright: 0;
}
.col-help {
    background:#f7f7f7;
    border:1px solid #ccc;
    font-size:13px;
    font-family:Tahoma, Geneva, sans-serif
}

JavaScript

$(function() {
    $('.col-help').hide();

    $('input:text').focus(function () {
        var $this = $(this);
        var oldField = $this.closest('tbody').find('input.focusField');
        oldField.removeClass("focusField").addClass("idleField");
        oldField.closest('td').next('td.col-help').hide();
        $this.removeClass("idleField").addClass("focusField");
        $this.closest('td').next('td.col-help').show();
        alert(1)
    });
});