How can I ensure that the card reveal length is consistent regardless of the handheld dimensions?

Question

I am using two Bootstrap cards. I conceal one of the cards (which is blue in colour) behind a card (which is white in colour) as illustrated below:

...and use the following code to reveal the concealed blue card behind the white card:

    $(document).ready(function(){
        $(".card-horizontal").click(function(){
            $(".backPanel").slideDown("slow");
        });
    });   

resulting in the desired below illustrated effect:

The issue I am having here is that the length of the revealed blue card isnt consistant as it is varies in revealed length depending on the dimensions as illustrated below:

Using the Chrome Developer Tools, in Mobil S-320px it reveals this much:

At Mobil M-375px it reveals a little less as illustrated below:

At Tablet-768 it reveals even less:

How can I ensure that the card reveal length is consistant regardless of the handheld dimensions?

Find below my HTML for both the white .card card-horizontal:

<div class="col-md-12 mb-3">         
    <div class="card w-75 card-horizontal" >
        <div class="img-square-wrapper">
            <img class="nftImages" src="http://via.placeholder.com/150" alt="Card image cap">
                <div class="card-body cardPadding">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
        </div>
    </div>
</div>

and the code for the blue concealed card .backPanel

<div class="card w-75 card-horizontal backPanel">
  <div class="img-square-wrapper">
            <div class="card-body ">
                 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            </div>
  </div>
</div>

Find below my CSS files for the white card:

.card {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
   background-color: #fff;
   background-clip: border-box;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
}

...and the CSS for the blue card:

.backPanel {
   position: absolute !important;
   display: none;
   top: -75px;
   z-index: -5;
   width: 99.5%;
   left: 1px;
   margin-block: auto;
   background-color: blue;
   box-shadow: 0 0px 0px 0px #343434 !important;
}

Answer 1

you can use javascript/jquery to set height and width of your element; here's an exmaple :

$(window).resize(function(){
   var height = $('.main-card').height();
  var width = $('.main-card').width();
   $('.hidden-card').height(height);
  $('.hidden-card').width(width);
})

$(window).resize();

.card-holder{
  position:relative;
/*   transition:.5s ,height 0s,width 0; */
}
.card {
  border: none;
  margin-bottom: 2rem;
  box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
  transition: all 0.3s ease-in-out, background 0s, color 0s, border-color 0s,height 0s,width 0s;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(34, 41, 47, 0.125);
  border-radius: 0.428rem;
}

.card-body {
  display: flex;
  padding: 10px;
  flex-direction: row;
}
.text {
  padding: 10px 40px;
}
p,
h4 {
  margin: 0px;
}
.hidden-card {
  background: blue;
  height: 94px;
  width: 589px;
  position: absolute;
  top: 0;
  z-index:1;
}
.main-card{
  z-index:2;
}
.hidden-card p{
padding:20px 10px;
}
.main-card:hover ~ .hidden-card{
  top:90%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-holder">
  <div class="card main-card">

    <div class="card-body">
      <div class="image">
        <img src="https://loremflickr.com/640/360" width="120px" alt="cats" />
      </div>
      <div class="text">
        <div>
          <h4>Text</h4>
        </div>
        <div>
          <p>Synergistically restore B2C "outside the box" thinking vis-a-vis enterprise e-commerce. </p>
        </div>
      </div>
    </div>
  </div>
  <div class="hidden-card card">
    <p>djadhkajdhkajdhk</p>
  </div>
  

</div>

Answer 2

You can achieve this with a toggle class:

$("#top-card").click(function() {
  $("#back-card").toggleClass("show");
});

.container {
  position: relative;
  margin: 20px;
}

.card {
  position: absolute !important;
  left: 0;
  right: 0;
  width: 90%;
  margin: 0 auto;
  z-index: 2;
  transition: top 1s;
}

#top-card {
  background-color: lightgrey;
}

#back-card {
  background-color: blue;
  top: 0;
  z-index: 1;
}

#back-card.show { 
  top: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <div class="card" id="top-card">
    <div class="card-body">
      This is some text within a card body.
    </div>
  </div>

  <div class="card" id="back-card">
    <div class="card-body">
      This is some text within a card body.
    </div>
  </div>

</div>