Bootstrap 4 Flexible Center Column - html

Question

I'm working with bootstrap 4. I have one row with 3 columns. However, I currently have the center column set to col-7, but I need it to be a flexible column that takes up all of the remaining horizontal space in the row. I have tried flex-col, but it just seems to break everything. If you look at the jsfiddle, you'll see that the right arrow column isn't all the way at the end, which is where I'd like it to be. I also plan on adding a 4th column between the right arrow and the lore ipsum quote. When the viewport size changes to a smaller resolution, all of the elements and content should still be visible. I've found solutions where this is not the case, but that doesn't work for me. Users need to be able to click on the arrows regardless of the screen size. Any insight into this for those of you with bootstrap XP?
https://jsfiddle.net/fce1ojsp/
Code sample required 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>

Answer 1

You can use flexbox for that. The key is flex grow 1 on the center element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border flex-grow-1">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>