What is an alternative to 'display: inline' in firefox?

Question

I have created a responsive dynamic element in HTML and CSS. Please check the below screenshot to see the general view of the element. This contains the title and an absolute positioned shape.

Below is the code line you can refer

.main-heading {
  font-size: 75px;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
  display: inline;
}

.main-heading .content {
  position: relative;
  z-index: 1;
}

.main-heading .after {
  width: 100%;
  height: 15px;
  background-color: #FDDB3A;
  position: absolute;
  left: 0;
  bottom: 12px;
  z-index: 0;
  bottom: 10px;
  left: 0;
}

<h2 class="main-heading">
  <span class="content">Reasons Why People Choose Us</span>
  <span class="after"></span>
</h2>

As you can see in the snippet,

the after shape is perfectly fitting the width of the last line

and this is because of the display: inline. But unfortunately, this misbehaves in firefox. Below is a screenshot in firefox browser (stretch the window with and see the problem)

What is an alternative I can try to work the same in all modern browsers?

I would like to get this done in only HTML and CSS, NO JAVASCRIPT. Because this is a custom widget created in ELEMENTOR with style controls.