2 набора вкладок на одной странице с «отмеченной» вкладкой по умолчанию

У меня есть два набора вкладок css на одной странице с одинаковыми заголовками и метками, но с разным содержимым, обе первые вкладки были «отмечены» в css, однако это ведет себя так, как будто два набора вкладок имеют только одно «отмеченное» свойство. Я бы хотел, чтобы оба набора всегда имели отмеченную вкладку. Возможно ли это, используя только css? Вот копия того, что у меня есть до сих пор ..

HTML

<div class = "tabs m-tab">
<input id = "about-m" type = "radio" name = "tabs" checked = "checked">
<label for = "about-m">About Me</label>

 <input id = "profile-m" type = "radio" name = "tabs">
<label for = "profile-m">Profile</label>

<input id = "typical-m" type = "radio" name = "tabs">
<label for = "typical-m">Typical Day</label>

<div class = "tab-info" id = "m-about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class = "tab-info" id = "m-profile">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class = "tab-info" id = "m-typical">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>

<div class = "tabs p-tab">
<input id = "about-p" type = "radio" name = "tabs" checked = "checked">
<label for = "about-p">About Me</label>

<input id = "profile-p" type = "radio" name = "tabs">
<label for = "profile-p">Profile</label>

<input id = "typical-p" type = "radio" name = "tabs">
<label for = "typical-p">Typical Day</label>

<div class = "tab-info" id = "p-about">
<p>Hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>

<div class = "tab-info" id = "p-profile">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class = "tab-info" id = "p-typical">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

css

.m-tab, .p-tab {
    display:inline-block;
    width:400px;
    height:450px;
}

.tab-info {
    display:none;
    padding:10px;
    border-top:1px solid #abc;
}

.tabs input {
    display:none;
}

.tabs label {
    display:inline-block;
    margin:0 0 -1px;
    padding:15px 25px;
    font-weight:600;
    text-align:center;
    color: rgb(134, 206, 155);
    border: 1px solid transparent;
}

.tabs label:hover {
    color:rgb(47, 187, 89);
    cursor:pointer;
}

.tabs input:checked + label {
    color:rgb(2, 163, 51);
    border:1px solid #abc;
    border-top:3px solid rgb(27, 190, 76);
    border-bottom:1px solid #fff;
}


#about-m:checked ~ #m-about,
#profile-m:checked ~ #m-profile,
#typical-m:checked ~ #m-typical,
#about-p:checked ~ #p-about,
#profile-p:checked ~ #p-profile,
#typical-p:checked ~ #p-typical {
    display: block;
}

скопируйте в мой codepen: https://codepen.io/tinqqx3/pen/MZNKZg большое спасибо заранее!