'How can I make a CSS triangle the same height as it's parent element?

I'm trying to match this layout here: enter image description here

I want one section with an equal split. The left side has a background color and the other does not. This issue I'm running into is that I want the triangle that is attached to the left side the SAME height as the element itself. If I give it a set height then additional/newer content will throw this off. How can I make this happen? Here is what I'm working with:

<section class='panel panel--standard u-bgColorSplitForm service-cta'>
    <div class="container">
        <?php if (have_rows('service_cta_group')) :
            while (have_rows('service_cta_group')) : the_row();
                $kicker = get_sub_field('kicker');
                $headline = get_sub_field('headline');
                $copy =  get_sub_field('copy');
                $form_header = get_sub_field('form_header');
                $form_id = get_sub_field('form_id');
        ?>
                <div class="grid">
                    <div class="grid__col--6 split-left">
                        <h4><?php echo $kicker; ?></h4>
                        <h3><?php echo $headline; ?></h3>
                        <p><?php echo $copy; ?></p>
                    </div>
                    <div class="grid__col--6">
                        <!-- Form will be added here -->
                    </div>
                </div>
    </div>
<?php endwhile;
        endif; ?>
</section>

.service-cta {
  position: relative;
  h4 {
    font-family: $font-stack-secondary;
    font-style: italic;
  }
  h3 {
    font-weight: 400;
  }
}

.split-left {
  position: relative;
  // triangle
  &::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    right: -100px;
    z-index: 1;
    border-top: 120px solid transparent;
    border-left: 75px solid $color-primary-tint;
    border-bottom: 120px solid transparent;
    transition: $transition-base;

    @include create-mq($md-width) {
      border-top: 150px solid transparent;
      border-left: 100px solid $color-primary-tint;
      border-bottom: 150px solid transparent;
    }
  }
}
css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source