шаблон гп таблица

[html]<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
:root {
--font: 'Cormorant Garamond', georgia, times new roman, serif;
--dark900: 46 46 46;
--light100: 230 230 230;
--text900: 23 23 23;
--primary400: 16 16 16;
--secondary400: 169 169 169;
--success: 113 141 118;
--warning: 201 136 118;
--danger: 167 68 68;
--link: 73 91 63;
--16: 16px;
--12: calc(var(--16) / 1.33);
--8: calc(var(--16) / 2);
--6: calc(var(--16) / 2.66);
--4: calc(var(--16) / 4);
--2: calc(var(--16) / 8);
}

.rp-laborex-wrapper {
position:relative;
width:100%;
height: 600px;
/* background: rgb(var(--secondary400)); */
border-radius: 5px;
padding: 1px;
}

.rp-laborex-content {
width: 95%;
height: 90%;
/* background: rgb(var(--light100)); */
background: rgb(var(--secondary400) / .12);
border-radius: 5px;
padding: 10px 0 20px 20px;
scrollbar-gutter: stable;
box-sizing: border-box;
margin: 6px auto;
}

.rp-laborex-chars {
display: none;
overflow: auto;
scrollbar-gutter: stable;
height: 520px;
padding-right: 18px;
}

.rp-laborex-chars.active {
display: block;
}

.rp-laborex-controls {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
z-index: 10;
position: relative;
max-width: 90%;
margin: 10px auto;
overflow-x: auto;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}

.rp-laborex-radio {
display: none;
}

.rp-laborex-tab {
background: rgb(var(--dark900));
display: inline-block;
font: normal 700 1.5rem / 100% var(--font) !important;
padding: var(--2) var(--8) var(--4);
color: rgb(var(--light100));
border-radius: 1rem;
cursor:pointer;
transition: background ease-in-out .4s;
}

.rp-laborex-tab.active {
background: rgb(var(--warning));
}

department {
display: grid;
grid-template-columns: 1.3fr 2fr;
width: 100%;
height: auto;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgb(var(--secondary400));

}

department:last-child {
border-bottom: none;
}

department p {
width:94%;
text-align:center;
background: rgb(var(--light100));
margin: 0 10px 0 0 !important;
padding: var(--2) var(--8);
border-radius: 1rem;
box-sizing:border-box;
font: normal 700 1.2rem / 100% var(--font) !important;
}

team {
display: flex;
flex-direction: column;
padding-left: 20px;
border-left: 1px dashed rgb(var(--secondary400));
}

member {
display:block
}

member::before {
content:'\25CF';
margin-right: 4px;
}

</style>

<div class="rp-laborex-controls">
<input type="radio" name="tab-group" class="rp-laborex-radio" checked>
<label class="rp-laborex-tab">фракция 1</label>

<input type="radio" name="tab-group" class="rp-laborex-radio">
<label class="rp-laborex-tab">фракция 2</label>

<input type="radio" name="tab-group" class="rp-laborex-radio">
<label class="rp-laborex-tab">фракция 3</label>

<input type="radio" name="tab-group" class="rp-laborex-radio">
<label class="rp-laborex-tab">фракция 4</label>

<input type="radio" name="tab-group" class="rp-laborex-radio">
<label class="rp-laborex-tab">фракция 5</label>

</div>

<div class='rp-laborex-chars'>

<department>
<p>название фракции</p>

<team>
<member>должность любой произвольной длины - <a href='#'>имя участника </a></member>
<member>должность любой произвольной длины - <a href='#'>имя участника </a></member>
<member>должность любой произвольной длины - <a href='#'>имя участника </a></member>
</team>

</department>