CSS place one section of a column to the bottom and keep the first one to the top (Using PrimeFlex)

Question

I have three rows in my column, most columns also have three textfields except for one that has two. I need to have the second textfield be positioned in the bottom. (having a gap where the 2nd textfield should have been).

Here is my snippet: PS (i have imported the textfield files but they still function as regular textfields)

<script>
  import aaInputField from '(my directory here)'
</script>

<template>
<div class="grid">
  <div class="col-3">
    <div class="field">
      <dt class="w-3">Label1</dt>
      <dd>
        <aaInputField class="w-17rem" />
      </dd>
    </div>
    <div class="field">
      <dt class="w-3">Label2</dt>
      <dd>
        <aaInputField class="w-17rem" />
      </dd>
    </div>
    <div class="field">
      <dt class="w-3">Label3</dt>
      <dd>
        <aaInputField class="w-17rem" />
      </dd>
    </div>
  </div>
  <div class="col-3">
      <div class="field">
      <dt class="w-3">OtherLabel1</dt>
      <dd>
        <aaInputField class="w-17rem" />
      </dd>
    </div>
    <div class="field">
      <dt class="w-3">OtherLabel2</dt>
      <dd>
        <aaInputField class="w-17rem" />
      </dd>
    </div>
  </div>  
</div>
</template>

my main target is to put OtherLabel2 at the bottom. Wondering if there is a class for that.

What I tried:

• <div class="field mt-6"> sort of works but this is not responsive and it messes up the column if the screen gets adjusted
• <div class="align-content-end"> has no effect
• <div class="align-self-end"> has no effect

Also, here is the link where I test out the classes for primeflex: https://primeflex.org/alignself

any advice would be great