Styling and positioning text within a textarea

I need to create and style this mockup in HTML:

How do I position the word “SIG” and the “140 characters remain” in the top left and bottom right of the textarea? I did some Googling and it looks like the solution offered most often is to use position:absolute and put a div over or under the textarea with exactly the same position - then put the two lines of text inside the div and style away. However, the efforts I came up with didn’t work so I’d appreciate some help. I used this html to play around with - but feel free to change it if there’s a better solution. This is part of a longer form - here are a couple of the rows:

<td>Frequency <select><option>Select</option><option>Second</option></select></td>
<td><textarea id=“topOne”>Textarea</textarea><div id=“underTop”><span>SIG</span><span>140 characters remaining</span></div></td>
<td>Brand medically necessary <input type=“checkbox” /></td><td><textarea>Something else</textarea></td>

How 'bout something like this:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

div {float: right; position: relative;}
textarea {padding: 20px 5px; width: 500px;}
div span {position: absolute; display: block; color: #999;} {top: 5px; left: 5px;} {bottom: 10px; right: 10px; font-style: italic;}

    <textarea id="topOne"></textarea>
    <span class="top">SIG</span>
    <span class="bot">140 characters remaining</span>

EDIT: Hm, has one issue—if the user types a lot of stuff, the bottom bit will overlap text nless user scrolls to bottom of textarea.

Personally, I would recommend placing the countdown line outside the textarea, just beneath it.

This works perfectly. It never occurred to me to put the textarea inside the div and then go from there. I don’t THINK the countdown line will be an issue since we’re limiting the number of characters they can add, but if it is, I’ll move it. Thanks for your help. : )

Cool, you’re welcome. :slight_smile: