Apologies in advance if this is a badly worded question. I am trying to build a component which looks like this from the design: 
We have a tagline and title then the option to have 1 to 4 cards in the ribbon. These are ordered using flex-direction: row-reverse (so they stack from the right hand side first).
We pass a data attribute via the backend, so we can target a ribbon with 1 - 4 cards.
So far I have built this using offsets of padding, margins and height, this works well when we have copy as we expect, but if the title is very short (or long) everything gets messed up. I am not even sure (given the way the component has been built) if this is even possible. Mobile is fine, and 1 or 2 cards is OK, but 3 or 4 gets tricky. We want to align the first two at the top (from the right hand side) then the third is taller and should align at the bottom with the 4th card (so 3 and 4 have an offset). Maybe it is better to think of the title and tagline as being offset?
I have made this jsfiddle using the 4 card layout.
Here is the sample HTML:
<section class="ribbon-icon grid grid-container content-wrapper" data-columns="4">
<div class="row">
<div class="ribbon-icon__title col col--md-6">
<p class="ribbon-icon__tagline">Solutions</p>
<p class="h1">Improve the benefits that health care can provide Improve the benefits that health care can provide..</p>
<p class="ribbon-icon__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus porta rhoncus pharetra amet, consequat ullamcorper vitae sed. Dolor sem tellus nec risus magna.</p>
</div>
<div class="ribbon-icon__items row col">
<a class="ribbon-icon__items--item col col--md-3" href="/en-gb">
<div>
<img src="/jssmedia/Eisai-Emea/Shared/Icons/icon-microscope.svg?iar=0&hash=277AE31475485774CD0094CBB39EC102">
</div>
<div>
<h3 class="ribbon-icon__item-title">Clinical studies</h3>
<p>Clinical trials, safety studies</p>
</div>
</a>
<a class="ribbon-icon__items--item col col--md-3" href="/en-gb">
<div>
<img src="/jssmedia/Eisai-Emea/Shared/Icons/icon-microscope.svg?iar=0&hash=277AE31475485774CD0094CBB39EC102">
</div>
<div>
<h3 class="ribbon-icon__item-title">Clinical studies</h3>
<p>Clinical trials, safety studies</p>
</div>
</a>
<a class="ribbon-icon__items--item col col--md-3" href="/en-gb">
<div>
<img src="/jssmedia/Eisai-Emea/Shared/Icons/icon-documents.svg?iar=0&hash=13316F3944BF062DA0708F1A38BDFF3D">
</div>
<div>
<h3 class="ribbon-icon__item-title">Patient information material</h3>
<p>Handouts, treatment guides, patient support material</p>
</div>
</a>
<a class="ribbon-icon__items--item col col--md-3" href="/en-gb">
<div>
<img src="/jssmedia/Eisai-Emea/Shared/Icons/icon-pills.svg?iar=0&hash=1FDCEF23CA8F9B5C6E1327B9A6FD4DAF">
</div>
<div>
<h3 class="ribbon-icon__item-title">Product information</h3>
<p>Learn about safety, administration, efficacy and more</p>
</div>
</a>
</div>
</div>
</section>
We are using scss but I have made a dump of the core css this relates to (it's in the fiddle of course) but here is the block:
.ribbon-icon {
margin-bottom: -4.5rem
}
@media (min-width:992px) {
.ribbon-icon {
margin-bottom: -2.5rem
}
}
.ribbon-icon__title {
margin: 0!important;
padding-left: 0;
padding-right: 0;
padding-bottom: 0
}
@media (min-width:768px) {
.ribbon-icon__title {
margin: 0 0 6rem!important
}
}
@media (min-width:768px) {
.ribbon-icon__title .h1 {
font-size: 2.5rem!important
}
}
.ribbon-icon__description {
margin-bottom: 0
}
.ribbon-icon__item-title {
font-weight: 600;
font-size: 1.4rem;
line-height: 1.5rem
}
@media (min-width:768px) {
.ribbon-icon__item-title {
font-size: 1.875rem;
line-height: 2.25rem
}
}
.ribbon-icon__items {
flex-direction: row-reverse!important;
padding-left: 0;
padding-right: 0;
padding-top: 0
}
@media (min-width:992px) {
.ribbon-icon__items {
position: relative;
top: -7rem
}
}
.ribbon-icon__items--item {
position: relative;
color: initial;
margin: 1.25rem 0 2.25rem;
text-decoration: none
}
.ribbon-icon__items--item:before {
content: "";
border-width: 0;
border-left: 1px solid;
border-image: linear-gradient(#b5007c, #007da3) 0 100%;
height: 100%;
position: absolute;
left: 0;
height: calc(100% - 1.2rem)
}
.ribbon-icon__items--item:hover {
color: initial
}
.ribbon-icon__items--item p {
margin: 0
}
.ribbon-icon__items--item img,
.ribbon-icon__items--item svg {
max-width: 3.25rem
}
@media (min-width:768px) {
.ribbon-icon__items--item img,
.ribbon-icon__items--item svg {
max-width: 5rem
}
}
@media (min-width:992px) {
.ribbon-icon__items--item {
position: relative;
margin: 0;
padding-bottom: 0
}
}
.ribbon-icon[data-columns="1"] .ribbon-icon__title {
flex: 0 0 75%;
max-width: 75%
}
@media (min-width:992px) {
.ribbon-icon[data-columns="3"] .ribbon-icon__items--item:nth-child(2),
.ribbon-icon[data-columns="4"] .ribbon-icon__items--item:nth-child(2) {
min-height: 30rem
}
}
@media (min-width:992px) {
.ribbon-icon[data-columns="3"] .ribbon-icon__items--item:nth-child(3),
.ribbon-icon[data-columns="3"] .ribbon-icon__items--item:nth-child(4),
.ribbon-icon[data-columns="4"] .ribbon-icon__items--item:nth-child(3),
.ribbon-icon[data-columns="4"] .ribbon-icon__items--item:nth-child(4) {
top: 7rem;
}
}