Html 按钮位于主 div 的底部而不是内部 Div

我有一个注册按钮，需要放置在卡片的底部，但不知何故使用绝对位置(Bottom:0)将其放置在主(第一个)div的底部.不知道该怎么做才能把它放在卡片底部:

    <STYle>
    .cardHorizontal {
      cursor: default;
      display:inline-block;
      transition: 0.3s;
      width: 40%;
      margin-right: 20px;
    }
    </STYle>
    <div style="height: 2000px; background-color: #F8F6F7;">
        <div style="margin-left: 20px;">
            <br><br>
            <!-- Card #1 -->
            <div class="cardHorizontal" style="width: 290px;">
              <a href="#" target="_blank">
              <img src="https://www.jquery-az.com/html/images/banana.jpg" style="width:50%; border-radius: 20px; margin: auto; display:block;">
              </a>
              <div class="container">
                <h3><b>Card Title</b></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum bibendum arcu quis molestie. Duis at pretium justo, at egestas leo. Quisque gravida, est sit amet blandit sagittis, lorem sem iaculis diam, nec facilisis mauris arcu quis orci. Etiam eget ullamcorper ipsum. Maecenas eu nulla ac quam aliquet bibendum vitae vitae est.</p>
                <p style="font-size: 16px"><b>Date: January 2050</b></p>
                <a href="#">Read More</a>
              </div>
              <button style="background-color: #6D925C; color: white; height: 50px; width: 150px; padding: 0; border: none;" type="button">Register</button>
            </div>
        </div>
    </div>  

有什么建议吗？

谢谢