CSS: Dynamically spacing two elements within in Div - html

Question

I have placed two elements within a div, one is a textarea tag and the other a time tag. The time tag placed on the div. When the textarea has few words, the space between the textarea tag and the time is fine. But when the textarea contains many characters it covers the time tag as shown in the picture below
My challenge is that how can I maintain the distance dynamically between the textarea and the time tag despite the number of characters in the time tag.
This is the CSS code to show my attempt
.messages textarea[readonly] {
font-size: 15px;
font-family: "Helvetica Neue";
margin: 0 0 0.2rem 0;
color: #000;
word-wrap: break-word;
resize: none;
overflow: hidden;
min-height: 5px;
height: 1px;
min-height: inherit;
background: #c2dfff;
margin-bottom: 0px;
z-index: 10;
}
.messages time {
font-size: 1.0rem;
color: #696969;
float: right;
position: absolute;
bottom: 10px;
right: 0;
z-index: 40;
padding-right: 5px;
}
This is the HTML view
<div class="message">
<textarea readonly elastic>{{ msg.Content }}</textarea>
<time datetime="2009-11-13T20:00">{{ humanize(msg.Time) }}</time>
</div>

Answer 1

If you don't mind having sometimes the date below the text, this could be a solution:
https://jsfiddle.net/91czko52/1/
Basically, we're creating a phantom :after element inside the paraghaph (the phantom elem is the black one > should be transparent) of the same MAX date size (or maybe a little more). So the text will never touch the date.
NOTE: this also implies the use of a 'classic' paragraph element instead of textarea: I hope and guess you probably don't really need textarea.

Answer 2

A possible solution, by duplicating the date and using pseudo element. https://jsfiddle.net/jLo9rnfz/1/
Similar to above but not using the max-width, here you always have the correct width. Whichever you prefer :)
/* Using a trick by duplicating the date you can keep the space to ensure no wrapping */
.container {
background: red;
position: relative;
line-height: 1.4;
}
.item {
/* This ensure you always have the correct spave available and never wrap over the visible date */
background: orange;
color: transparent;
word-break: keep-all;
word-wrap: normal;
white-space: nowrap;
}
.item::before {
/* Here you have a duplicate date but this one is visible and correctly positioned
Adding the date to css can be done with js or php, google search will help you out there */
content: '5 days ago';
position: absolute;
color: black;
right: 0;
}
<div class="container">
paragraph here to test wrappingparagraph here to test wrappingparagraph here to test wrappingparagraph here to test wrapping
<span class="item">
5 days ago
</span>
</div>

Answer 3

Also consider checking out how it is done (inspect element) in existing apps that show similar behaviour, such as WhatsApp web.