Solution 1 :

you can use a combination of box-shadow and display: inline-block to accomplish what you are trying to do. I have updated the answer. Here is the code:

.grandparent {
  display: inline-block;
  position: relative;
.parent {
  display: inline-block;
  background: blue;
  position: absolute;
  top: 0;
  left: 0;

.child {
  width: 100px;
  height: 100px;
  background: red;
  margin: 5px;

.shadow {
  margin-left: -7px;
  margin-top: -7px;
  background: pink;
  z-index: -100;
  border: 1px solid green;

.empty {
  opacity: 0;
<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
    <div class="parent shadow">
    <div class="child empty"></div>

Problem :

I want to make this:
stacked cards

the html would look like so:

<div class="container>
  <div class="top-card>
   <div class="card-content">
  <div class="bottom-card>

I am having trouble styling this so that the height of the entire card adjusts automatically according to the content inside the top card. Thank you in advance.


Comment posted by Lecho

One thing I forgot to mention, the bottom card should always be the same size as the top card. But the bottom card will have no content. Just for styling

Comment posted by Lecho

But what about the border for the box shadow?

Comment posted by sriram hegde

please accept my answer and upvote it if it helped you.Thanks