Currently, I am using bootstrap 4 and have a row with 3 columns. The center column is set to col-7, but I need it to be flexible and take up all remaining horizontal space in the row. I attempted to use flex-col, but it caused issues with the layout. In the provided jsfiddle link, you can see that the right arrow column doesn't align all the way to the end as desired. I also intend to insert a 4th column between the right arrow and the Lorem ipsum quote. Regardless of viewport size changes, all elements and content should remain visible. I've come across solutions where this isn't the case, but they don't work for me as users must be able to click on the arrows at any screen size. Any advice from those experienced with Bootstrap?
Please find below the required code sample when linking to jsfiddle:
<div class="container touchpointContainer">
<div class="row tall">
<div class="col-1 centerVertically">
<a onclick="advanceReview(-1)">
<img class="prev" src="leftArrow.png"/>
</a>
</div>
<div class="col-7 centerVertically mainText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore"
</div>
<div class="col-1 centerVertically">
<a onclick="advanceReview(1)">
<img class="next" src="rightArrow.png"/>
</a>
</div>
</div>
</div>