JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dynamic-cta-ctr">
  <div class="cta-item">
    <div class="heading-text"><h3>Some content</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
  <div class="cta-item">
    <div class="heading-text"><h3>You can have your cake and eat it too!</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
  <div class="cta-item">
    <div class="heading-text"><h3>More people will come if you say we have punch and pie</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
</div>

SCSS

.dynamic-cta-ctr {
		display: flex;

		.cta-item {
			
            display: flex;
            flex-direction: column;
            
            
            flex: 1;
			text-align: center;
			padding: 0 30px;
			position: relative;
			border-right: 1px solid #555;
			&:last-child {
				border-right: none;
			}
      
			.bottom-aligned {
				/* position: absolute;
				bottom: 0; */
                margin-top: auto;
			}
		}
	}