JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div>
    <div>
      <input type="radio" name="ebene1">Auswahl 1
      <div class="ebene2">
        <h1>Auswahl 1</h1>
        <input type="radio" name="ebene2">Auswahl 1
        <input type="radio" name="ebene2">Auswahl 2
        <input type="radio" name="ebene2">Auswahl 3
        <input type="radio" name="ebene2">Auswahl 4
        
        <div class="first">
          <br>Content, wenn Auswahl 1 getroffen wurde. Hier können Bilder usw. hin!
        </div>
        
        <div class="second">
          <br>Content, wenn Auswahl 2 getroffen wurde. Bla Bla!
        </div>
        
        <div class="third">
          <br>So viel Content auf einer Stelle, bei Auswahl 3!
        </div>
        
        <div class="fourth">
          <br>Und noch vieles mehr bei Auswahl 4!
        </div>
        
        <p class="ausblenden">
          <br>Content, ohne etwas ausgewählt zu haben!
        </p>
      </div>
    </div>
    <div>
      <input type="radio" name="ebene1">Auswahl 2
      <div class="ebene2">
        <h1>Auswahl 2</h1>
        <input type="radio" name="ebene2">Auswahl 1
        <input type="radio" name="ebene2">Auswahl 2
        <input type="radio" name="ebene2">Auswahl 3
        <input type="radio" name="ebene2">Auswahl 4
        <input type="radio" name="ebene2">Auswahl 5
        
        <div class="first">
          <br>Content, wenn Auswahl 1 getroffen wurde. Hier können Bilder usw. hin!
        </div>
        
        <div class="second">
          <br>Content, wenn Auswahl 2 getroffen wurde. Bla Bla!
        </div>
        
        <div class="third">
          <br>So viel Content auf einer Stelle, bei Auswahl 3!
        </div>
        
        <div class="fourth">
          <br>Und noch vieles mehr bei Auswahl 4!
        </div>
        
        <p class="ausblenden">
          <br>Content, ohne etwas ausgewählt zu haben!
        </p>
      </div>
    </div>
  </div>
  
  
  <div>
    <div>
      <input type="radio"...

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding-left: 20px;
}

.main {
  width: 250px;
  position: relative;
}

.main > div {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  position: relative;
}

.main > div > div > input {
  margin-top: 50px
}

.ebene2 {
  position: absolute;
  z-index: 10;
  background: grey;
  right: -220px;
  width: 200px;
  top: 20px;
  padding: 10px;
  color: white;
  display: none;
}

input[name='ebene1']:checked + div.ebene2  {
  display: block;
}

.first, .second, .third, .fourth {
  display: none;
}

input[name^='ebene2']:nth-child(2):checked ~ .first {
  display: block;
}

input[name^='ebene2']:nth-child(3):checked ~ .second {
  display: block;
}

input[name^='ebene2']:nth-child(4):checked ~ .third {
  display: block;
}

input[name^='ebene2']:nth-child(5):checked ~ .fourth {
  display: block;
}

input[name^='ebene2']:checked ~ .ausblenden {
  display: none;
}