JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
<div class="col-xs-6">Caja normal</div>
<div class="col-xs-6">
  <input type="text" name="cajanormal" id="cajanormal">
</div>
</div>

<div class="row">
<div class="col-xs-6">Textarea normal</div>
<div class="col-xs-6">
<textarea name="areanormal" id="areanormal" maxlength="100"></textarea>
</div>
</div>

<div class="row">
<div class="col-xs-6">caja con cuenta</div>
<div class="col-xs-6">
  <input type="text" name="cajacuenta" id="cajacuenta" class="cuentacaracteres" maxlength="20">
</div>
</div>

<div class="row">
<div class="col-xs-6">Textarea con cuenta</div>
<div class="col-xs-6">
  <textarea name="areanormal" id="areanormal" maxlength="100" class="cuentacaracteres"></textarea>
</div>
</div>

CSS

input,textarea{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.countChar = function() {

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

        var $me = $(this);
        var maxLength = parseInt($me.attr('maxlength'), 10);
        var charCount = $me.val().length;
        var nombrecajalimite=$me.prop('id')+"_limit";
        var cajalimite = $('#'+nombrecajalimite);

        cajalimite.text('' + maxLength + '/' + (maxLength - charCount));
      });
	   
        var $me = $(this),
          maxLength = parseInt($me.attr('maxlength'), 10),
          charCount = $me.val().length;
		  var nombrecajalimite=$me.prop('id')+"_limit";
          var cajalimite = $('#'+nombrecajalimite);
		  if (cajalimite){
			$me.after('<p id="'+nombrecajalimite+'" class="limit"></p>');
		  }
		   cajalimite = $('#'+nombrecajalimite);
		  cajalimite.text('' + maxLength + '/' + (maxLength - charCount));
     
    });
  };
  /* añade css para las cajas de manera automatica */
  $( "<style>.limit {  float: right;  clear: both;  margin-bottom: 10px;  font: 400 0.688em/1.38 'Roboto';  text-align: right;  color: #777777;}</style>" ).appendTo( "head" )
  
}(jQuery));

$('.cuentacaracteres').countChar();