html - CSS: Dynamically spacing two elements within in Div -

i have placed 2 elements within div, 1 textarea tag , other time tag. time tag placed on div. when textarea has few words, space between textarea tag , time fine. when textarea contains many characters covers time tag shown in picture below

my challenge how can maintain distance dynamically between textarea , time tag despite number of characters in time tag. css code show 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 html view

<div class="message">   <textarea readonly elastic>{{ msg.content }}</textarea>   <time datetime="2009-11-13t20:00">{{ humanize(msg.time) }}</time> </div> 

if don't mind having date below text, solution:

https://jsfiddle.net/91czko52/1/

basically, we're creating phantom :after element inside paraghaph (the phantom elem black 1 > should transparent) of same max date size (or maybe little more). text never touch date.

note: implies use of 'classic' paragraph element instead of textarea: hope , guess don't need textarea.