Flexbox Distribute items specific space

Question

I have a situation of two columns inside a bootstrap row and I want to achieve the result depicted on the following image using only css/flexbox(not js at all): Result

That means I want the space on the left column to be distrubted so that the two inputs (one on the left column and one on the right column) fall exactly one next to each other with the input in the left column having the exact same space bellow it as the height of the "TEXT TEXT" that is below the input of the right column. Result Explained

My code is bellow.I came close enougt but I can not calculate or leave the space bellow the left columns input somehow.

<div class="row">
                        <div class="col-xl-6 d-flex flex-column justify-content-between">
                          <div>
                            <label for="deliverypoint_code">TEXT</label>
                          </div>
                          <div>
                            <div>
                              <input type="text" id="deliverypoint_code" name="deliverypoint_code" class="w-100 p-3">
                            </div>
                          </div>                    
                        </div>   
                        <div class="col-xl-6 d-flex flex-column justify-content-between">
                          <div>
                            <label for="deliverypoint_code">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</label>
                          </div>
                          <div>
                            <div>
                              <input type="text" id="deliverypoint_code" name="deliverypoint_code" class="w-100 p-3">
                            </div>            
                            <div class="mt-2">
                              <span class="error-message">TEXT TEXT</span>
                            </div>
                          </div>                    
                        </div>                                                 
                      </div>

Here is how my result looks like: Fail Result

Answer 1

You can use an empty col-6 element to achieve what you want.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-6 d-flex flex-column justify-content-between">
      <div>
        <label for="deliverypoint_code">TEXT</label>
      </div>
      <div>
        <div>
          <input type="text" id="deliverypoint_code" name="deliverypoint_code" class="w-100 p-3">
        </div>
      </div>
    </div>
    <div class="col-6 d-flex flex-column justify-content-between">
      <div>
        <label for="deliverypoint_code">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</label>
      </div>
      <div>
        <div>
          <input type="text" id="deliverypoint_code" name="deliverypoint_code" class="w-100 p-3">
        </div>
      </div>
    </div>
    <div class="col-6"></div>
    <div class="col-6 mt-2">
      <span class="error-message">TEXT TEXT</span>
    </div>
  </div>
</div>