CSS Grid

Hey Shariar, congrats on your solution.

As a feedback, check the font for the title, as it is still different from the challenge.

Talking about the question you made, you can take a look at CSS Grid. With CSS Grid, you can define some areas and place your boxes inside those areas, or you can use the grid layout (rows and columns) to place the boxes starting from a specific row/column. This way you will be able to position the boxes and create that challenge effect.

For example:

.card-div {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(3, 1fr);
}

.supervisor {
    grid-row: 2/4;
    grid-column: 1;
}

.team-builder {
   grid-row: 1/3;
   grid-column: 2;
}

.karma {
    grid-row: 3/5;
    grid-column: 2;
}

.calculator {
    grid-row: 2/4;
    grid-column: 3;
}