Aligning HTML panels vertically using CSS

Question

I'm trying to place forms vertically within a canvas. I have two panels, which when they're set to absolute are placed as, I would expect, on the right of the page (but occupying the same space). The complication is that the panels have collapse buttons at the top and so hard coding an offset wont work (I need the lower one to move up when the upper one is collapsed).

My CSS for the forms is as below:

#properties-tab {
position: absolute;
display: inline;
top: 16px;
right: 20px;
width: 20%;
text-align: center;
z-index: 101;
display: block;
background-color: #9e9a90;
background: rgba(0, 0, 0, 0.1);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border: 0;

}

#tag-tab {
position: absolute;
display: inline;
top: 16px;
right: 20px;
width: 20%;
text-align: center;
z-index: 101;
display: block;
background-color: #9e9a90;
background: rgba(0, 0, 0, 0.1);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border: 0;

}

The CSS on the buttons looks like this:

#job-info {
position: absolute;
display: inline;
top: 34px;
right: 20px;
width: 20%;
text-align: center;
z-index: 101;
display: block;
background-color: #9e9a90;
background: rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;

}

#tag-info {
position: absolute;
display: inline;
top: 34px;
right: 20px;
width: 20%;
text-align: center;
z-index: 101;
display: block;
background-color: #9e9a90;
background: rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;

}

Placed using the above code, it looks like this:

When I change the settings to relative, this happens:

Any help would be appreciated.

question from:https://stackoverflow.com/questions/65902087/aligning-html-panels-vertically-using-css

Answer 1

Flexbox solved the problem well, I suspect grid might also have given a solution:

.flex-container {
top: 16px;
right: 20px;
position: absolute;
display: flex;
flex-wrap: wrap;
width: 20%;

}

Thanks @Sfili_81