Column of h2 elements takes width of the biggest, how to prevent?

I have a column of H2 elements that I rotate through with a CSS transform. I need the background color of the H2 element to only cover the H2 element and text. There is a line running behind the text and right now the shortest element's background is the length of the longest and covers the line behind it with a blank space after the text.

.title {
  margin-top: -30px;
  font-size: calc(17px + (0.01* 100vw));
}

.slogan {
  background-color: #29335cff;
}


/* TEXT FLIPPER */

.text-container {
  height: 2.45rem;
  background-color: transparent;
  overflow: hidden;
}

.text-flip {
  animation: text-flip 5s cubic-bezier(0.23, 0.8, 0.32, 1.2) infinite;
}

.text-flip h2 {
  background-color: #29335cff;
}

@keyframes text-flip {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-77%);
  }
  40% {
    transform: translateY(-50%);
  }
  60% {
    transform: translateY(-25%);
  }
  100% {
    transform: translateY(0);
  }
}

<div class='title d-flex'>

  <div class='px-2 slogan'>
    <h2>
      TAP COCKTAILS MADE
    </h2>
  </div>

  <div class='text-container '>
    <div class='text-flip d-flex justify-content-start flex-column'>
      <h2 class=''>EASY</h2>
      <h2 class=''>PROFITABLE</h2>
      <h2 class=''>TASTY</h2>
      <h2 class=''>YOUR OWN</h2>
    </div>
  </div>
</div>

/* Container styles */
.text-container {
  height: 2.45rem;
  background-color: transparent;
  overflow: hidden;
  display: inline-block;
  position: relative;
}

/* Set up the text flip animation */
.text-flip {
  animation: text-flip 10s cubic-bezier(0.23, 0.8, 0.32, 1.2) infinite;
  display: grid;
  grid-auto-rows: 1fr;
}

/* Individual text styles */
.text-flip h2 {
  background-color: #29335cff;
  white-space: nowrap;
  width: max-content; /* Makes each item take only as much width as its content */
  margin: 0;
  padding: 0 10px; /* Optional: adds padding inside the background */
}

/* Calculate the max width and ensure all items have the same width */
.text-flip h2:first-child {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap;
}

/* Animation keyframes */
@keyframes text-flip {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-100%);
  }
  40% {
    transform: translateY(-200%);
  }
  60% {
    transform: translateY(-300%);
  }
  100% {
    transform: translateY(0);
  }
}