I'm running these on page load to ensure that all h2 tags have a span inserted (it's a large WordPress site that needs to have this done to get the right styles)

$('.bottomLine').each(function() {
    $(this).insertAfter($(this).parent().find('.price'));
});
$('.prod-desc > h2').each(function() {
    $(this).wrapInner('<span />');
})
$('h2.review_text').each(function() {
    $(this).wrapInner('<span />');
})
$('.related > h2').each(function() {
    $(this).wrapInner('<span />');
})
$('.up-sells > h2').each(function() {
    $(this).wrapInner('<span />');
})

EDIT

I'm kinda getting the message that this is a bad idea so I will expand upon why I think I need to.

I need to create this out of h2 tags.

Which I currently make using:

<div class="seporator">
  <span>Join us on instgram</span>
</div>

and SCSS

.seporator {
  text-align: center;
  text-transform: uppercase;
  padding: 40px 40px 46px;
  width: 100%;

  span {
    padding-bottom: 10px;
    border-bottom: 1px solid $red;
    line-height: 48px;
    margin-bottom: 10px;
  }
}

Throughout the WordPress site I see that the previous theme has been using a CSS hook to style h2 elements within the page as breaks. Therefore when I perform the insertion of a <span> and add h2 to my scss I get the design.

  h2 {
    @extend .seporator;
    font-size: 1.5rem;
  }

If this underlined, correctly spaced design can be achieved using purely h2 tags then I would love to hear about it.