JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="col-xs-6">
		<label for="campo1">Caja de texto con placeholder</label>
  </div>
	<div class="col-xs-6">
    <input type="text" name="campo1" id="campo1" 
									class="form-control" placeholder="Especificar valor">
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    <label>Caja de texto con placeholder oculta</label>
  </div>
	<div class="col-xs-6">
<input type="text" name="campo2" id="campo2" 
									class="form-control" placeholder="Especificar valor" style="display:none">
    </div>
</div>
<div class="row">
  <div class="col-xs-6">
    <label>Caja de texto sin placeholder </label>
  </div>
	<div class="col-xs-6">
<input type="text" name="campo3" id="campo3" 
									class="form-control" >
                    </div>
</div>

CSS

input{width:100%;}
div{
  display:block;
  float:left;
}
.col-xs-6 {
    position:relative;
    width: 50%;
}
.row{
  width:100%;
     margin: 0 -15px;
  padding:0px;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    }

JavaScript

(function($) {
  'use strict';

  $.fn.jPlaceHolderEmpty = function() {

    return this.each(function(i, element) {
		$(element).keyup(function updateCharCounter() {

			var $me = $(this);
			var PH = $me.attr('placeholder');
			if (PH!="" && PH!=undefined){
				var charCount = $me.val().length;
				var nombrecajaPH=$me.prop('id')+"_placeholder";
				var cajaPH = $('#'+nombrecajaPH);
				if (charCount>0 && $me.is(":visible")){
					cajaPH.text('' + PH);
				}else{
					cajaPH.text('');
				}
			}
		});
	   
        var $me = $(this);
			var PH = $me.attr('placeholder');
			if (PH!="" && PH!=undefined){
				var charCount = $me.val().length;
				var nombrecajaPH=$me.prop('id')+"_placeholder";
				var cajaPH = $('#'+nombrecajaPH);
				if (cajaPH){
					$me.after('<p id="'+nombrecajaPH+'" class="jPHempty"></p>');
				}
				cajaPH = $('#'+nombrecajaPH);
				if (charCount>0 && $me.is(":visible")){
					cajaPH.text('' + PH);
				}else{
					cajaPH.text('');
				}
			}
     
    });
  };
  /* añade css para las cajas de manera automatica */
  $( "<style>.jPHempty {  float: right;  clear: both;  margin-bottom: 10px;  font: 400 0.7em 'Roboto';  text-align: right;  color: #777777;}</style>" ).appendTo( "head" )
  
}(jQuery));



//llamar a la funcion
		 $('input').jPlaceHolderEmpty();