Edit in JSFiddle

$(".chars").on('keyup', function() {
  $this = $(this)
  var stringVal = $this.text();

  var charString = "";
  var countString = "";
  
  $.each(stringVal.split(''), function (i, char) {
     char = char == " " ? " " : char;
     charString += "<span class='char'>"+char+"</span>"
     countString += "<span class='count'>"+i+"</span>"
  })

  $this.html(charString)
	$(".counts").html(countString)
}).trigger('keyup');

<span contenteditable="true" spellcheck="false" class="chars">One Two Three Four Five</span><br/>
<span class="counts"></span>













<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
  Peripherally related to this question on SO:
  <a href='https://stackoverflow.com/a/47945986/1366033'>
    First two words in the string - sql server
  </a>
</div>

.char,.count {
  font-family: consolas, monospace;
  display:inline-block;
  width:15px;
  margin: 0 1.5px;
  text-align: center;
}
.char {
 vertical-align: bottom;
 font-size:26px;
 border-bottom: solid 1.5px black;
 border-radius:3px;

}
.count {
 font-size:12px;
 border-top: solid 1px lightgrey;
 border-radius:2px;
}