JSFiddle - React, Tailwind, and code Playground
HTML
<textarea class="withprefix" data-prefix="Hi There, "></textarea>
CSS
textarea {
width: 200px;
height: 100px;
}
textarea, span.prefix {
font-family: arial;
font-size: 1em;
font-weight: normal;
padding: 2px;
border-width: 1px;
}
span.prefix {
position:absolute;
}
}
JavaScript
$('textarea.withprefix').each(function() {
var prefix = $('<span/>')
.text($(this).data('prefix'))
.addClass('prefix')
.appendTo('body')
.css({
left: $(this).position().left + 'px',
top: $(this).position().top + 'px',
});
$(this).css({textIndent: prefix.outerWidth() + 'px'});
});