Displaying a DIV on top of a Textarea element - html

Question

I have a small "floating_Note_DIV" which I want to display on top of a textarea, as shown in the pictures. As well, I want to show a yellow_DIV below the textarea, flushed with the bottom edge of the textarea. If I do not display the floating_Note_DIV, the textarea is flushed with yellow_DIV (seen below in Image_1).
However, if I display the floating_Note_DIV, a gap appears between the textarea and the yellow_DIV ; i.e., I was thinking that if I put position: relative, and top and left/right I would get the f_N_DIV to fly over the textarea. It does seem to work however it looks like a gap is left where the "footprint" of the f_N_Div is left behind, at it's "supposed-to-be" position between tomato_DIV and yellow_DIV (see below Image_2).
If I use position "Absolute" it gets positioned w.r.t to the whole page, I am expecting the tomato_DIV to move around and so the f_N_DIV will have to be positioned w.r.t the textarea or tomato_DIV.
Any workaround? Thanks, all help appreciated ! !
the HTML is:
<div id='tomato_DIV' >
<textarea id="textarea_main" cols="40" rows="3" maxlength="300"></textarea>
<div id="floating_Note_DIV">Your Thoughts!!</div>
<div id="yellow_DIV"></div>
</div>
the relavant CSS is:
#tomato_DIV
{ background-color: tomato;
padding: 0px 0px 5px 0px;
width: 310px;
border-radius: 5px; }
#textarea_main
{ box-sizing: border-box;
margin: 5px 5px 0px 5px; padding: 2px; /* note: bottom margin is 0 to make flush with yellow div */
width: calc(100% - 10px);
height: 75px;
resize: none; outline: none;
border: 1px solid #737d96; border-radius: 3px; }
#floating_Note_DIV
{ margin: 0px 0px 0px 0px;
padding: 0px 2px 0px 0px;
position: relative; /* how to do this bit? */
right: -232px;
top: -14px;
width: 70px;
height: 11px;
font-size: 8px; font-style: normal; font-weight: bold; color: black;
text-align: right; border: 1px solid #737d96; }
#yellow_DIV
{ margin: 0px 5px 5px 5px; /* note: top margin is 0 to make flush with textarea */
border: 1px solid grey;
border-radius: 3px;
width: calc(100% -10px);
height: 30px; background-color: #fdffb6; }

Answer 1

Is this what you are trying to achieve?
HTML : Put the #floating_Note_DIV element inside #yellow_DIV. You could leave it where it is, but setting top CSS property would have been difficult.
CSS :
Change position property of #floating_Note_DIV from relative to absolute.
Set position property of #yellow_DIV to relative.
Set right to 0.
Set bottom to 100%.
I modified the margin-bottom to 5px to align it perfectly.
#tomato_DIV {
background-color: tomato;
padding: 0px 0px 5px 0px;
width: 310px;
border-radius: 5px;
}
#textarea_main {
box-sizing: border-box;
margin: 5px 5px 0px 5px;
padding: 2px;
/* note: bottom margin is 0 to make flush with yellow div */
width: calc(100% - 10px);
height: 75px;
resize: none;
outline: none;
border: 1px solid #737d96;
border-radius: 3px;
}
#floating_Note_DIV {
margin: 0px 0px 5px 0px;
padding: 0px 2px 0px 0px;
position: relative;
position: absolute;
right: 0;
bottom: 100%;
width: 70px;
height: 11px;
font-size: 8px;
font-style: normal;
font-weight: bold;
color: black;
text-align: right;
border: 1px solid #737d96;
}
#yellow_DIV {
margin: 0px 5px 5px 5px;
/* note: top margin is 0 to make flush with textarea */
border: 1px solid grey;
position: relative;
border-radius: 3px;
width: calc(100% -10px);
height: 30px;
background-color: #fdffb6;
}
<div id='tomato_DIV'>
<textarea id="textarea_main" cols="40" rows="3" maxlength="300">
</textarea>
<div id="yellow_DIV">
<div id="floating_Note_DIV">Your Thoughts!!</div>
</div>
</div>