JSFiddle - React, Tailwind, and code Playground
HTML
<form name="save" method="post" action="save.php">
<input width="100%" name="title" type="text" id="title" value="Untitled Written" placeholder="Title">
<input type="submit" name="save" value="Save">
<div>
<textarea rows="8" cols="3" class="alignright" name="set_a_syllable_count" /></textarea>
<textarea class="writer" name="set_a">There should be "0" to the left below this line

But there isn't...</textarea>
</div>
</form>
CSS
.alignright {
width:5%;
height:72vh;
resize: none;
float:left;
border:none;
overflow:hidden;
}
.alignright:focus {
outline: none !important;
border-color:none;
border:none;
box-shadow:none;
}
.writer {
height:72vh;
width:400px;
float:left;
}
JavaScript
function $count_how_many_syllables($input) {
$("[name=set_" + $input + "]").keyup(function () {
var arrayOfLines = $("[name=set_" + $input + "]").val().match(/[^\r\n]+/g);
var $content;
var $word = 0;
var $syllable_count = "";
var $result = "";
for (var i = 0; i < arrayOfLines.length; i++) {
$content = arrayOfLines[i].toLowerCase();
word = $content.replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '')
.replace(/^y/, '')
.match(/[aeiouy]/g).length;
if ($content.length <= 3) {
word = 1;
}
if (word !== 0) {
$syllable_count = word.toString();
$result = $result + $syllable_count + "\n";
} else {
$result = $result + "0 \n";
}
}
$("[name=set_" + $input + "_syllable_count]").val($result);
// set scrolling
$("[name=set_" + $input + "_syllable_count]").scrollTop = $("[name=set_" + $input + "]").scrollTop;
$("[name=set_" + $input + "_syllable_count]").scrollLeft = $("[name=set_" + $input + "]").scrollLeft;
});
}
(function ($) {
$count_how_many_syllables("a");
})(jQuery);