Html CSS：在Div中动态分隔两个元素

我在一个div中放置了两个元素，一个是textarea标记，另一个是time标记。放置在div上的时间标记。当textarea没有几个单词时，textarea标记和时间之间的空间很小。但是，当文本区域包含许多字符时，它会覆盖时间标签，如下图所示

我面临的挑战是，尽管时间标记中有许多字符，如何动态地保持textarea和时间标记之间的距离。 这是显示我的尝试的CSS代码

.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;
}

这是HTML视图

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

{{msg.Content}
{{人性化（msg.Time）}

如果您不介意有时在文本下方显示日期，这可能是一个解决方案：

基本上，我们正在创建一个幻影

：在paraghaph中的
元素之后（幻影元素是黑色的，应该是透明的），具有相同的最大日期大小（或者可能更大一点）。所以文本永远不会触及日期

注意：这也意味着使用“经典”段落元素而不是textarea：我希望并猜测您可能并不真正需要textarea。
如果您不介意在文本下方有日期，这可能是一个解决方案：


基本上，我们正在创建一个幻影
：在paraghaph中的
元素之后（幻影元素是黑色的，应该是透明的），具有相同的最大日期大小（或者可能更大一点）。所以文本永远不会触及日期

注意：这也意味着使用“经典”段落元素而不是textarea：我希望并猜测您可能并不真的需要textarea。
一个可能的解决方案，复制日期并使用伪元素。
与上面类似，但不使用最大宽度，在这里您始终具有正确的宽度。无论你喜欢哪个：）


/*使用复制日期的技巧，您可以保留空格以确保不进行包装*/
.集装箱{
背景：红色；
位置：相对位置；
线高：1.4；
}
.项目{
/*这将确保您始终有正确的spave可用，并且从不在可见日期上换行*/
背景：橙色；
颜色：透明；
断字：保留一切；
换字：正常；
空白：nowrap；
}
.项目：：之前{
/*这里有一个重复的日期，但这个日期是可见的，并且位置正确
将日期添加到css可以通过js或php完成，谷歌搜索将帮助您实现这一点*/
内容：“5天前”；
位置：绝对位置；
颜色：黑色；
右：0；
}

此处的段落用于测试wrappingparagraph此处的段落用于测试wrappingparagraph此处的段落用于测试wrappingparagraph此处的段落用于测试wrappingparagraph
5天前
复制日期并使用伪元素是一种可能的解决方案。
与上面类似，但不使用最大宽度，在这里您始终具有正确的宽度。无论你喜欢哪个：）


/*使用复制日期的技巧，您可以保留空格以确保不进行包装*/
.集装箱{
背景：红色；
位置：相对位置；
线高：1.4；
}
.项目{
/*这将确保您始终有正确的spave可用，并且从不在可见日期上换行*/
背景：橙色；
颜色：透明；
断字：保留一切；
换字：正常；
空白：nowrap；
}
.项目：：之前{
/*这里有一个重复的日期，但这个日期是可见的，并且位置正确
将日期添加到css可以通过js或php完成，谷歌搜索将帮助您实现这一点*/
内容：“5天前”；
位置：绝对位置；
颜色：黑色；
右：0；
}

此处的段落用于测试wrappingparagraph此处的段落用于测试wrappingparagraph此处的段落用于测试wrappingparagraph此处的段落用于测试wrappingparagraph
5天前
还考虑在现有的显示类似行为的应用程序中如何检查（元素），例如
< P>也考虑在现有的显示类似行为的应用程序中检查它是如何完成的（检查元素），例如
和张贴HTML，或者创建“保持距离”到底是什么意思？对于上面发布的最后一个“错误”的图形用例，您希望发生什么？例如，阳台可以伸展或增加高度吗？是的。气球的高度应该增加，以显示气球的高度time@Igor请看一下htmlcode@JnG，您的图像在
textarea
内显示日期，但日期在
textarea
外。魔术？然后发布你的html或创建“保持距离”的确切含义是什么？对于上面发布的最后一个“错误”的图形用例，您希望发生什么？例如，阳台可以伸展或增加高度吗？是的。气球的高度应该增加，以显示气球的高度time@Igor请看一下htmlcode@JnG，您的图像在
textarea
内显示日期，但日期在
textarea
外。魔术？我认为这个解决方案有一些问题，看一看，我已经固定了容器的宽度（我认为它会），并对文本长度进行了一些调整：我认为这个解决方案有一些问题，看一看，我已经固定了容器的宽度（我认为它会），并对文本长度进行了一些调整：