how to move button on bottom using css?

I am trying to move my button on bottom (some pixel above bottom).so it always be in bottom whether it contend is less or large. I tried using flex-box also not able to do that.Container have min-height : 500px

here is my code https://jsbin.com/joyalosate/edit?html,css,output

Expected output :: Explore products move bottom with some pixel above bottom .

.bottom__block {
    position: absolute;
    bottom: 20px;
    padding: 0 40px;
    /* display: flex;
    flex-direction: column; */
    border: 1px solid;
    min-height:500px;
}

HTML

<div class="rh02w2">
    <div class="bottom__block">
   <button class="rh02-pcontent" data-lbl="panel2-home-apps-content-area">
      <h1 class="rh02-ttl">Tetst  <b>Applications</b></h1>
      <div class="rh02-sub">Complete Suite of  Apps</div>
      <div class="rh02-leadin">
         <p>Streamline your enterprise business process. With ERP Financials, Procurement, Project Portfolio Management and more, you can increase productivity, lower costs, and improve controls.</p>
      </div>
   </button>
   <div class="rh02w4">
      <div class="rh02-cta">
         <div class="obttns">
            <div>
              <a data-lbl="panel2-home-apps-learn-more">Explore products</a>
           </div>
         </div>
      </div>
   </div>
</div>
  </div>

css

.rh02w2 {
    background-color: #325C72;
    height: calc(100vh - 60px);
    transform: translateY(60px);
    left: 0;
    min-width: 100%;
    position: absolute;
    margin-top: -60px;
    color: #FBF9F8;
}

.bottom__block {
    position: absolute;
    bottom: 20px;
    padding: 0 40px;
    /* display: flex;
    flex-direction: column; */
    border: 1px solid;
    min-height:500px;
}

.obttns {
    width: 100%;
    font-size: 1.4rem;
    margin-bottom: -1.6rem;
   
    display: -ms-flexbox;
    display: flex;
  flex-flow: row wrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: stretch;
    align-items: stretch;
      
}


 .obttns>div>* {
    color: #161513 !important;
    background: #fff;
}


.obttns a {
  font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    border: 0;
    min-height: 30px;
    height: 100%;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-flow: column wrap;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
}

Answer

Replace your CSS with this.

   .rh02w2 {
      background-color: #325c72;
      height: calc(100vh - 60px);
      transform: translateY(60px);
      left: 0;
      min-width: 100%;
      position: absolute;
      margin-top: -60px;
      color: #fbf9f8;
    }

    .bottom__block {
      position: absolute;
      bottom: 20px;
      padding: 0 40px;
      /* display: flex;
        flex-direction: column; */
      border: 1px solid;
      min-height: 500px;
    }

    .rh02w4 {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }

    .obttns {
      width: 100%;
      font-size: 1.4rem;
    }

    .obttns > div > * {
      color: #161513 !important;
      background: #fff;
    }

    .obttns a {
      font-size: 1em;
      font-weight: 500;
      font-family: inherit;
      line-height: 1.2;
      padding: 10px;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
      border: 0;
      min-height: 30px;
      height: 100%;
      text-align: center;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      -ms-flex-wrap: wrap;
      flex-flow: column wrap;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
    }