Jak określić złożone bezwzględne odniesienie do CSS

Mam stronę HTML zawierającą kilka przycisków radiowych i kilka powiązanych fieldset, każdy z własnym identyfikatorem. Chcę ukryć / wyświetlić div w zależności od konkretnego przycisku radiowego.

Załączone Fiddle wykonują swoje zadanie.

Oto kod HTML

<div id="FS1">External fieldset with radiobuttons

  <div class="row">
    <input checked="checked" id="R1" name="Group1" type="radio" value="1"/>
    <label for="R1">Element 1</label>
    <input id="R2" name="Group1" type="radio" value="2"/>
    <label for="R2">Element 2</label>
    <input id="R3" name="Group1" type="radio" value="3"/>
    <label for="R3">Element 3</label>
    <fieldset class="fs" id="FS1-1">
      <legend>Header element 1</legend>
      <div class="form-group">
        <input class="form-control" id="exampleInputText1" type="text"/>
        <label for="exampleInputText1">Input field in the first element</label></div>
    </fieldset>
    <fieldset class="fs" id="FS1-2">
      <legend>Header element 2</legend>
      <div class="form-group">
        <input class="form-control" id="exampleInputText2" type="text"/>
        <label for="exampleInputText2">This is the input field for the second</label>
      </div>
    </fieldset>
    <fieldset class="fs" id="FS1-3">
      <legend>Header element 3</legend>
      <div class="form-group">
        <input class="form-control" id="exampleInputText3" type="text"/>
        <label for="exampleInputText3">And this is the last input field</label>
      </div>
    </fieldset>
  </div>
</div>

I to jest CSS

#FS1 div input:not(:checked) ~ #FS1-1, #FS1-2, #FS1-3 { display: none; } /* to hide all the detail elements */
#FS1 div input[value="1"]:checked ~ #FS1-1 { display: block; } /* to show only the 1th elem */
#FS1 div input[value="2"]:checked ~ #FS1-2 { display: block; } /* to show only the 2nd */
#FS1 div input[value="3"]:checked ~ #FS1-3 { display: block; } /* to show only the 3rd */

Teraz, co chcę osiągnąć, to przenieść fieldset poza div, na końcu fragmentu, ale to zepsuje odniesienia css i fragment nie będzie już działać.

Poniżej znajduje się żądany fragment, który nie jest uruchomiony. Potrzebuję sugestii, jak przedefiniować CSS

<div id="FS1">External fieldset with radiobuttons

  <div class="row">
    <input checked="checked" id="R1" name="Group1" type="radio" value="1"/>
    <label for="R1">Element 1</label>
    <input id="R2" name="Group1" type="radio" value="2"/>
    <label for="R2">Element 2</label>
    <input id="R3" name="Group1" type="radio" value="3"/>
    <label for="R3">Element 3</label>
  </div>
  <fieldset class="fs" id="FS1-1">
    <legend>Header element 1</legend>
    <div class="form-group">
      <input class="form-control" id="exampleInputText1" type="text"/>
      <label for="exampleInputText1">Input field in the first element</label></div>
  </fieldset>
  <fieldset class="fs" id="FS1-2">
    <legend>Header element 2</legend>
    <div class="form-group">
      <input class="form-control" id="exampleInputText2" type="text"/>
      <label for="exampleInputText2">This is the input field for the second</label>
    </div>
  </fieldset>
  <fieldset class="fs" id="FS1-3">
    <legend>Header element 3</legend>
    <div class="form-group">
      <input class="form-control" id="exampleInputText3" type="text"/>
      <label for="exampleInputText3">And this is the last input field</label>
    </div>
  </fieldset>
</div>