How can I prevent my text from being pushed up when I add more content?

Issue

I have an image, and a text-group that holds text.

<div class="container">

  <img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">

  <div class="text-group">
    <h1>Moon</h1>          
    <h1>Star</h1>
  </div>

</div>

I want the first word to always be positioned half on the image and half off the image like this.

The Problem: When I add more text into the text-group, it pushes the first word up.

Without adding a height to my text-group and without changing the bottom position of my text-group, how can I prevent my text from being pushed up when more text is added? In other words, how can I achieve the result below?

Full HTML and CSS

* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.text-group {
  position: absolute;
  bottom: -15%;
}

h1 {
  color: green;  
  font-size: 5rem;
}

<div class="container">

  <img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">

  <div class="text-group">
    <h1>Moon</h1>          
    <h1>Star</h1>
  </div>

</div>

Solution

you might not need position. A negative top margin on the first h1 is plenty enough, no need then to mind img's height.

* {
  margin: 0;
  padding: 0;
}

.container {
  /*  position: relative; */  /*optionnal i believe */
}

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.text-group {
  /* position:absolute */  /*optionnal i believe */
}

.text-group h1:first-child {
  margin-top: -0.7em;
}

h1 {
  color: green;
  font-size: 5rem;
}

<div class="container">

  <img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">

  <div class="text-group">
    <h1>Moon</h1>
    <h1>Star</h1>
  </div>

</div>

works the same with position:

* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.text-group {
  position: absolute
}

.text-group h1:first-child {
  margin-top: -0.7em;
}

h1 {
  color: green;
  font-size: 5rem;
}

<div class="container">

  <img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">

  <div class="text-group">
    <h1>Moon</h1>
    <h1>Star</h1>
  </div>

</div>

Answered By - G-Cyrillus