How can i position the pills arrow in right center of the long text ?

Question

I have a header with long text, I can't seem to come up with the proper css to make the pill on the right center with all the text. I need two lines or more and the pill need to be in the center at the right area. How can anyone tell me how this is done ? Any help is appreciated.

.c-cta-box-link{
  text-decoration-color: #ffffff;
}

a{
  color: #000;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
.c-cta-box-header {
    padding: 1px 15px 8px;
    background-color: #bbce00;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }
    
.c-cta-box-headline {
    margin-bottom: 0;
    padding-right: 20px;
    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-text-decoration-color: #fff;
    text-decoration-color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    }
    
    .c-cta-box-content {
    height: calc(100% - 40px);
    padding: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 300;
    }
    
    .c-cta-box-link:after {
    content: "";
    position: absolute;
    top: 10%;
    right: 7%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
    margin: 0;
    white-space: nowrap;
}

<a title="Download som PDF her" href="/-/media/wakeup/pdf/organisationsdiagram-dk-01-07-2017.pdf?la=da&amp;hash=69E3519ABB423F7EA21E655A18F2C7BCAA84A4E5" target="Aktiv browser" class="c-cta-box-link">
<div class="c-cta-box-header">
  <h2 class="c-cta-box-headline">Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF  </h2>
</div> 
<div class="c-cta-box-content"></div>
</a>

Answer 1

This should help centralise the arrow, update the following elements with:

a {
   position: relative;
   display: block;
   color: #000;
   text-decoration: none;
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
}
.c-cta-box-link:after {
   content: "";
   position: absolute;
   top: 50%;
   margin-top: -3px;
   right: 7%;
   width: 0;
   height: 0;
   border-top: 6px solid transparent;
   border-right: none;
   border-bottom: 6px solid transparent;
   border-left: 6px solid #fff;
   margin: 0;
   white-space: nowrap;
}

Note: The arrow won't be centralised straightaway because of the empty c-cta-box-content div being calculated in the relative space of the a tag.