CSS - aide Selecteur

Bonjour,

Voilà, je suis en train de coder une fiche de personnage en HTML5/CSS3 sur un site pour du jeu de rôle.
Malheureusement ce site m'empèche d'utiliser le javascript pour coder la feuille, je ne peux donc compter que sur HTML5 et CSS3 pour faire ce que je voudrais.

Après plusieurs recherche j'ai réussi à faire ce que je veux, c'est-à-dire masquer/démasquer un div en fonction de l'input de type radio qui est checked.
Mon seul soucis c'est que je n'ai pu faire ça que dans le même élément parent, ce que j'aimerais c'est donc de pouvoir déplacer les div qui sont en dessous des input dans un autre div parent qui serait juste après celui des input
Je suppose que s'il y a moyen de le faire, le code à modifier sera dans le css au niveau des sélecteurs input ~ div mais je ne sais pas quel combinaison de sélecteur je devrais utiliser pour faire cela.
Si quelqu'un peut m'aider, ce serait sympa.
Je vous met mon code actuel en espérant que cela soit assez clair :

HTML:

<div class="sheet-tabInput">
    <input id="radio-tab1" class="sheet-tabInput1" type="radio" name="tab" checked="checked"/>
    <label for="radio-tab1">Informations</label>
    <input id="radio-tab2" class="sheet-tabInput2" type="radio" name="tab"/>
    <label for="radio-tab2">Caractéristiques</label>
    <input id="radio-tab3" class="sheet-tabInput3" type="radio" name="tab"/>
    <label for="radio-tab3">Compétences</label>
    <input id="radio-tab4" class="sheet-tabInput4" type="radio" name="tab"/>
    <label for="radio-tab4">Statistiques</label>
    <input id="radio-tab5" class="sheet-tabInput5" type="radio" name="tab"/>
    <label for="radio-tab5">Equipement</label>
    <input id="radio-tab6" class="sheet-tabInput6" type="radio" name="tab"/>
    <label for="radio-tab6">Inventaire</label>
    <input id="radio-tab7" class="sheet-tabInput7" type="radio" name="tab"/>
    <label for="radio-tab7">Quêtes</label>
    <input id="radio-tab8" class="sheet-tabInput8" type="radio" name="tab"/>
    <label for="radio-tab8">Journal</label>

    <div class="sheet-tab1">
        tab 1
    </div>
    <div class="sheet-tab2">
        tab 2
    </div>
    <div class="sheet-tab3">
        tab 3
    </div>
    <div class="sheet-tab4">
        tab 4
    </div>
    <div class="sheet-tab5">
        tab 5
    </div>
    <div class="sheet-tab6">
        tab 6
    </div>
    <div class="sheet-tab7">
        tab 7
    </div>
    <div class="sheet-tab8">
        tab 8
    </div>
</div>

CSS:

.sheet-tabInput input {
    display: none;
}

.sheet-tabInput label {
    display: inline-block;
    /*box-sizing:border-box;*/
    background-color:black;
    width: 160px;
    height: 25px;
    margin: 5px;
    border: 2px solid red;
    padding: 5px;
    color:white;
    text-align: center;
    font-family: Arial;
    font-size: 16px;
    cursor: pointer;
}

.sheet-tabInput input:checked+label {
    background-color: red;
    border: 2px solid black;
}

div.sheet-tab1,
div.sheet-tab2,
div.sheet-tab3,
div.sheet-tab4,
div.sheet-tab5,
div.sheet-tab6,
div.sheet-tab7,
div.sheet-tab8 {
    display: none;
}

.sheet-tabInput input.sheet-tabInput1:checked ~ div.sheet-tab1,
.sheet-tabInput input.sheet-tabInput2:checked ~ div.sheet-tab2,
.sheet-tabInput input.sheet-tabInput3:checked ~ div.sheet-tab3,
.sheet-tabInput input.sheet-tabInput4:checked ~ div.sheet-tab4,
.sheet-tabInput input.sheet-tabInput5:checked ~ div.sheet-tab5,
.sheet-tabInput input.sheet-tabInput6:checked ~ div.sheet-tab6,
.sheet-tabInput input.sheet-tabInput7:checked ~ div.sheet-tab7,
.sheet-tabInput input.sheet-tabInput8:checked ~ div.sheet-tab8 {
    display: block;
    width: 100%;
    height: 100%;
    background-color: black;
    color: red;
}

div.sheet-content {
    box-sizing:border-box;
    width: 95%;
    height: 700px;
    background: white;
    margin :0px;
    border: 2px solid black;
    padding: 0px;
}