When cards expand hover bottom row

Question

I have a bunch of cards , on click , I'm expanding card with description . The problem is that when it expands it moves down bottom row . I need to hover bottom cards without moving it . I recreated my problem in sandbox : https://codesandbox.io/s/withered-star-cov3x

here how it supposed to be by design:

thats what I got, when card expands it moves down bottom row:

Answer 1

just add this three properties in your .expand-card class,

 position: absolute;
    z-index: 20;
    background: white;

Your .expand-card class should be

.expand-card {
    position: absolute;
    z-index: 20;
    background: white;
    padding: 30px 40px;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.27);
}

Then it will work fine.

And you can explore more on css property positions