Label içine almayınca radio butonlarım çek olmuyor ama label içinde iken check işlemi gerçekleşiyor. İşin garibi bunu kendim yazdım ama div form group diye bir divin içine alınca neden olmuyor mesela sebebi nedir?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="checkbox" class="checkbox" id="check">
    <label for="check">Check 1</label>
    <label>
        <input type="radio" class="radio" name="radio">
        <span class="radio-button"></span>
        <span class="text">Radio 1</span>
    </label>
    <label>
        <input type="radio" class="radio" name="radio">
        <span class="radio-button"></span>
        <span class="text">Radio 1</span>
    </label>
    <label>
        <input type="radio" class="radio" name="radio">
        <span class="radio-button"></span>
        <span class="text">Radio 1</span>
    </label>
    <label>
        <input type="radio" class="radio" name="radio">
        <span class="radio-button"></span>
        <span class="text">Radio 1</span>
    </label>
</body>
</html>
.checkbox {
    appearance: none;
}
.checkbox + label {
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkbox + label::before {
    content: '';
    width: 20px;
    height: 20px;
    background: gray;
    display: inline-block;
    margin-right: 10px;
}
.checkbox:checked + label::before {
    content: '\2713';
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.radio {
    appearance: none;
}
.radio-button {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    border-radius: 50%;
    position: relative;
}
.radio-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: black;
    border-radius: 50%;
    display: inline-block;
    opacity: 0;
    transition: 300ms;
}
.radio:checked + .radio-button::before {
    opacity: 1;
}