How can I position a span in the top right of a textarea?

Question

I have a text area with id="aboutme" and an span with class="maxlength-feedback", I want the span to be positioned in the top-right-hand corner of the textarea. It will be a counter for the text area.

I know both elements should have position="relative" and the span should be display="inline-block", but it's not working.

I would appreciate any help. Thanks.

Answer 1

Just do it like this

Explanation: Wrap your textarea inside a container div and give position: relative; to the container, and position: absolute; to span, now to be sure your div default behavior which is display: block; will make your span flow on the extreme left so use display: inline-block; for your container div

Demo

HTML

<div class="wrap">
    <textarea></textarea>
    <span>Counter</span>
</div>

CSS

.wrap {
    position: relative;
    display: inline-block;
}

.wrap span {
    position: absolute;
    top: 0;
    right: 0;
}