JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<form action="doRegistration" method="post">
		<p>&nbsp;</p>
		<div id="_registration_form_div">
			<!-- Row -->
			<div id="_registration_form_tr">
				<div id="_registration_form_label"></div>
				<div id="_registration_form_input">
					<input name="" type="text" value="First Name *" maxlength="100"
						class="_registration_form_input_textbox">
				</div>
				<div id="_registration_form_comments"></div>
			</div>

			<!-- Row -->
			<div id="_registration_form_tr">
				<div id="_registration_form_label"></div>
				<div id="_registration_form_input">
					<input name="" type="text" value="Last Name *" maxlength="100"
						class="_registration_form_input_textbox">
				</div>
				<div id="_registration_form_comments"></div>
			</div>
			
		</div>
	</form>

	
</body>

CSS

@charset "US-ASCII";

#_registration_form_tr {
	display: table-row;
}

#_registration_form_div {
	display:table;
}
#_registration_form_label{
	display: table-cell;
	padding-left: 5px;
	padding-right: 5px;
	min-width:100px;
	max-width:150px;
	width:20%;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #666;
}

#_registration_form_input{
	display: table-cell;
	padding-left: 5px;
	padding-right: 5px;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	color: #666;
} 

#_registration_form_comments{
	display: table-cell;
	padding-left: 5px;
	padding-right: 5px;
	color: #F00;
	font-family: "Times New Roman", Times, serif;
	font-size: 10px;
	font-weight: 700;
	font-variant: normal;
	text-transform: lowercase;
	font-style: italic;
}
._registration_form_input_textbox {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	color: #666;
}

JavaScript

/**
 * 
 */

/*Textbox click action.*/
$("._registration_form_input_textbox").focusin(
		function(e) {
			var boxText = $(this).val().trim();
			var labelText = '';
			/* remove any comment & warning from div */
			var warnDiv = $(this).parent().next();
			$(warnDiv).text('');
			/* set the load time value as hidden attribute */
			if ($(this).data('hidden') == undefined) {
				$(this).data('hidden', boxText);
			}
			if ($(this).data('hidden') == boxText) {
				var labelDiv = $(this).parent().prev();
				var len = boxText.length;
				for (var i = 0; i < len; i++) {
					labelText = labelText + boxText.substring(0, 1);
					boxText = boxText.substring(1, boxText.length);
					setTimeout(createLabelAnimation($(this), labelDiv, boxText,
							labelText), 24 * i);
				}
			}
		});

/*Text box action on focus out*/
$("._registration_form_input_textbox").focusout(
		function(e) {
			var boxText = $(this).val().trim();
			if (boxText.trim() == '') {
				var labelDiv = $(this).parent().prev();
				var labelText = labelDiv.text();
				var len = labelText.length;
				for (var i = 0; i < len; i++) {

					boxText = labelText.substring(labelText.length - 1,
							labelText.length)
							+ boxText;
					labelText = labelText.substring(0, labelText.length - 1);
					setTimeout(createLabelAnimation($(this), labelDiv, boxText,
							labelText), 24 * i);
				}
				/*
				 * check whether field is mandatory, if no flash message &
				 * warnings
				 */
				var warnDiv = $(this).parent().next();
				if (boxText.charAt(boxText.length - 1) == '*') {
					$(warnDiv).text("This is mandatory field");
				}
			}
		});


var createLabelAnimation = function(textBox, labelDiv, textBoxText,
		labelDivText) {
	return function() {
		$(textBox).val(textBoxText);
		$(labelDiv).text(labelDivText);
	};
};