How to prevent floated element from jumping out of the parent container when there isn't enough space

Question

I'm trying to replicate the WhatsApp Web but I'm struggling to keep the timestamp on each message from jumping outside of the container when it runs out of space.

* {
  margin: 0;
}

.app {
  display: grid;
  place-items: center;
  background-color: #eae6df;
  background-image: linear-gradient(180deg, #eae6df, #d1d7db);
  height: 100vh;
}

.app__body {
  display: flex;
  background-color: #eae6df;
  height: 90vh;
  width: 90vw;
  max-width: 1600px;
  box-shadow: -1px 4px 20px -6px rgba(0, 0, 0, 0.7);
}

.chat {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.chat__body {
  position: relative;
  flex: 1;
  background: #efeae2;
}

.background,
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.background {
  opacity: 0.4;
  z-index: 1;
}

.content {
  padding: 30px 70px;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 2;
}

.messages {
  margin-bottom: 20px;
}

.message {
  position: relative;
  width: fit-content;
  max-width: 65%;
  margin-bottom: 3px;
  padding: 8px 10px;
  background-color: white;
  border-radius: 7.5px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.text {
  font-size: 14px;
}

.timestamp {
  position: relative;
  bottom: 0;
  right: 0;
  float: right;
  margin: 10px 0 0 5px;
  font-size: 11px;
  color: grey;
}

.message.own {
  margin-left: auto;
  background-color: #d9fdd3;
}

@media screen and (max-width: 650px) {
  .chat {
    flex: 1;
  }
  .content {
    padding: 25px;
  }
  .message {
    max-width: 85% !important;
  }
}

<div class="app">
  <div class="app__body">
    <div class="chat">
      <div class="chat__body">
        <div class="background"></div>
        <div class="content">
          <div class="messages false">
            <p class="message false">
              <span class="text">Lorem ipsum</span>
              <span class="timestamp">03:11 PM</span>
            </p>
            <p class="message false">
              <span class="text">Dolor sit amet</span>
              <span class="timestamp">03:11 PM</span>
            </p>
          </div>
          <div class="messages own">
            <p class="message own">
              <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor ultricies malesuada. Proin lobortis, turpis eu convallis dapibus, libero dui euismod ante, quis maximus mauris odio sit amet urna. In interdum accumsan suscipit.</span>
              <span class="timestamp">03:11 PM</span>
            </p>
          </div>
          <div class="messages false">
            <p class="message false">
              <span class="text">Donec interdum tellus odio, non maximus magna tempus vitae. Aenean malesuada sodales nibh, ac pharetra est pulvinar eget.</span>
              <span class="timestamp">03:11 PM</span>
            </p>
          </div>
          <div class="messages own">
            <p class="message own">
              <span class="text">Proin convallis vehicula augue, in tempor massa faucibus ac. Aenean sed ante a erat semper rhoncus eu at mi.</span>
              <span class="timestamp">03:11 PM</span>
            </p>
            <p class="message own">
              <span class="text">Suspendisse sollicitudin nulla id sem dapibus fringilla. Morbi blandit finibus lorem hendrerit consectetur. Donec lorem ligula, sollicitudin id risus in, facilisis auctor urna. Integer ut velit eget dui eleifend pulvinar. Donec tincidunt urna id tortor accumsan maximus. Phasellus fermentum pretium porttitor.</span>
              <span class="timestamp">03:11 PM</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

At the moment, the timestamp is floated to the right with some margins for spacing but if you resize your window just so the space it's occupying gets taken by the text, it jumps out of the container. How do I stop this from happening so that it's fixed on the lower right corner of the container but also prevent other elements from overlapping it?