Text wrapping, right aligned icon, and button height with Bootstrap 5 button with flex box

Using Bootstrap 5 button code with centered text and a right aligned icon with multiple buttons in a flex box situation, how do I stop the button text overlapping the icon when it wraps, and how do I set the height of the button while keeping the text center aligned vertically when it wraps?

You can see whole code with the wrapping and overlapping issues in this fiddle by moving the center column with your mouse and making the display area bigger and smaller.

Here’s the html code for a single button:

 <a href="#" target="_blank" class="btn custom-btn" onmouseover="openRegion(event, 't1')">This Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>

Here’s the css (on top of Bootstrap 5):

.custom-btn, .custom-btn:visited {
    position: relative; 
    padding: 1.5rem 0.5rem;
    margin: 0.5rem 0.5rem;  
    font-size: 0.95rem;
    border-radius: 0;
    line-height: 1.2rem;
    background-color: #c1c1c1;
    border-color: #c1c1c1;
    flex: 33%;
    text-transform: uppercase;
    color:#fff;
    box-sizing: border-box;
    letter-spacing: 0.8px;
    height: 70px;
  }
  .custom-btn:active, .custom-btn:hover {
    background-color: #7d7c7c;
    border-color: #787878;
    text-transform: uppercase;
    color:#fff;

  }
  .icon-arrow-new{
    position: absolute;
    right:10px; 
    width: 22px;
  }