Footer at bottom of page for responsive screen

I want footer to stick at bottom of page and 43 pixels above bottom boundary. and If screen resolution changed, it should not overlap the content. Below css is for 1920 dimension. I want it to be responsive for other dimensions too.

I added position: absolute and bottom:0 but it places the footer at bottom. and it overlaps the content if resolution changed.

margin-top: auto also not working.

Html

<div className="col-md-12 p-0 login-page">
   <div className="main-container">
     <div className="wrapLoginPage">
        <div className="content">

          <div className="img-logo">
            <img src={GooglerLogo} alt="Logo" height={58} width={95} />
          </div>
          <div  className="img-caption">
            MI jjfkjd  fdnfjdjf fjndjfdjf dfjdjfjdnfjdfdf
          </div>

          // .login-div (css)
          {this._renderLoginForm()}

          <div className="footer-container">
            <div className="footer-img">
                <img src={AppleLogo} alt="Apple Logo" height={48} width={48}/>
            </div>
            <div className="footer-text">
              Lorem ipsum footr content dfd dfdgfdgfd
            </div>
          </div>
        </div>

          <div className="left-container">
              {/* <img src={SampleImg} alt="Sample" height={840} width={1350} /> */}
          </div>

     </div>
   </div>
 </div>

CSS

// Login Page
@import "../mixins.scss";

.login-page {
  width: 100%;
  margin: 0 auto;

  .main-container {
    width: 100%;  
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .left-container {
    display: flex;
    width: calc(100% - 490px);
    background: linear-gradient(to bottom, #f7f7fc 60%, #F2D8FF 40%);
    position: relative;
  }

  .wrapLoginPage {
    width: 100%;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    flex-direction: row-reverse;
  }

  .content {
    width: 490px;
    min-height: 100vh;
    display: block;
    background-color: #fff;
    padding: 101px 50px 43px 44px;
  }

  .img-logo {
    padding-bottom: 18px;
  }
  .img-caption {
    color: #1C2C42;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    padding-bottom: 113px;
  }

  
  .login-div {
    width: 100%;
    display: inline-block;
  }
 

  .footer-container {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    
    .footer-text {
      width: 297px;
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      line-height: 18px;
      color: #575E6B;
      padding-left: 12px;
    }
  }
}

This is the screen image