Bootstrap 5 - Aligning content in a Grid display - css

Question

I have an app that uses Bootstrap 5. In this app, I need to layout some content that looks like this:
+----------------------+-----------------------------------------------+
| Assignment Begins On | [date picker goes here] |
+----------------------+-----------------------------------------------+
| v | |
+----------------------+-----------------------------------------------+
| Continues For | [slider that fills remaining width goes here] |
+----------------------+-----------------------------------------------+
The first column need to be the same size, with the content centered. The second column needs to fill the remaining width. Based on my understanding, I should use a d-grid because I'm trying to layout things using rows and columns. However, the column sizes shouldn't be evenly sized. Instead, they should be based on a) the content of the first column and b) the space available in the parent. This made me think I should be using d-flex instead. However, if I use d-flex, I can't meet the requirements of a. So, I reverted back to using a d-grid. But now, I can't center the content in the first column because the columns aren't the same size. I currently have:
<div class="d-grid">
<div class="row">
<div class="col-auto text-center" style="background-color:yellow;">Assignment Begins On</div>
<div class="col">[date picker]</div>
</div>
<div class="row">
<div class="col-auto text-center" style="background-color:orange;">v</div>
</div>
<div class="row">
<div class="col-auto text-center" style="background-color:red;">Continues For</div>
<div class="col">[slider]</div>
</div>
</div>
I added the background-color details to show that the columns are different size. How do I display content in a grid layout in Bootstrap 5 that allows me to meet the needs of a and b?

Answer 1

As explained here, there's no simple solution for this problem. I'd recommend using CSS grid. It would only require a little extra CSS...
HTML
<div class="d-grid gap-2">
<div class="col text-center text-nowrap" style="background-color:yellow;">Assignment Begins On</div>
<div class="col"> Date picker</div>
<div class="col text-center" style="background-color:orange;">v</div>
<div class="col"></div>
<div class="col text-center text-nowrap" style="background-color:red;">Continues For</div>
<div class="col"> Slider </div>
</div>
CSS
.d-grid {
grid-template-columns: 0fr 1fr;
}
Codeply