Positioning div elements without serverside calculations - layout

Question

I have created a site that has a dynamically built menu, which draws out tabs, according to some arrays in the backend. Selecting a tab fetches the whole page again, with different css classes applied, depending on the selected tab.
Basically, I am using style="position: absolute; left: xxxxpx" where the xxxx is calucated in the backend.
I want to change the site so that the gui is more independent of the backend.
I am unsure how to proceed with changing this so that all the layout calculations are made by css. I was thinking about doing it with css variables, and keeping the essential same code, but I am unsure how to determine which node and therefore how far it should be offset.
My Current Code
1st tab selected
<div class="topTabSelected tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> Design ManagerProject Manager</div>
<div class="topTab tab-project noprint" style="left: 468px;">Project Manager</div>
3rd tab selected
<div class="topTab tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> Design ManagerProject Manager</div>
<div class="topTabSelected tab-project noprint" style="left: 468px;">Project Manager</div>
CSS
.tab-admin{
background-color: var(--admin-tab-bg);
}
.tab-design{
background-color: var(--design-tab-bg);
}
.tab-project{
background-color: var(--project-tab-bg);
}
.topTabSelected {
position: absolute;
top: 31px;
z-index: 8;
color: white;
font-weight: bold;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: transparent;
padding: 3px;
border-radius: 5px 5px 0 0;
width: 120px;
height: 17px;
text-align: center;
}
.topTab {
position: absolute;
top: 31px;
z-index: 2;
color: white;
font-weight: bold;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
padding: 3px;
border-radius: 5px 5px 0 0;
width: 120px;
text-align: center;
}
.topTab a {
text-decoration: none;
color: white;
}
.topTab a:hover {
text-decoration: underline;
color: white;
}
Backend code to calculate positions:
$tabwidth = 132;
$widthmodifier = 200;
for ($mainpageCounter = 1; $mainpageCounter <= count($mainpage); $mainpageCounter++) {
$topTabDivStart = "\n<div class=\"topTab " . ($p == $mainpageCounter ? "topTab-Selected " : "") . $mainpage[$mainpageCounter]["cssClass"] . " noprint\" style=\"left: " . $widthmodifier . "px;\">";
$topTabDivEnd = "</div>\n";
if ($p == $mainpageCounter) {
echo $topTabDivStart . $mainpage[$mainpageCounter]["title"] . $topTabDivEnd;
} else {
echo $topTabDivStart . "" . $mainpage[$mainpageCounter]["title"] . " $topTabDivEnd";
}
$widthmodifier += $tabwidth;
}