Simple html & css - div doesn't cover the inner div

General
1

Is there a way to modify the container class with css so that spinner looks inside the container (the container has the dynamic height to be more or equal the spinner height)?

.container {
  border: 1px solid green;
}
.spinner {
  display: flex;
  position: absolute;
  right: 30%;
  border: 1px solid red;
}
.spinner::before {
  content: "Why this text is not inside green";
  font-size: 24px;

}

<div class="container">
  <div class="spinner">
  </div>
</div>
<div>
Why this text is not below another text?
</div>