JSFiddle - React, Tailwind, and code Playground

HTML

<table class="coolTable">
  <tr>
    <th colspan="2">Title</th>
  </tr>
  <tr>
    <td onClick="document.location.href='#child'">
      <a href='#child' class="parent1">Parent1 muuuuuuuuuuch longer, and even longer and longer and longer and longer and longer and longer </a>
      <div id="child">
        <h3>Child1</h3>
        <p> Here pops Info on something when parent1 is clicked.</p>
      </div>
      <!--EO Child1 -->
    </td>
    <td onClick="document.location.href='#child2'">
      <a href='#child2' class="parent2">
        <div>
          Parent2</div>
      </a>
      <div id="child2">
        <h3>Child2</h3>
        <p> Here pops Info on something when parent2 is clicked.</p>
      </div>
      <!--EO Child2 -->
    </td>
  </tr>
  <tr>
    <td onClick="document.location.href='#child3'">
      <a href='#child3' class="parent3">Parent3</a>
      <div id="child3">
        <h3>Child3</h3>
        <p> Here pops Info on something when parent3 is clicked.</p>
      </div>
      <!--EO Child1 -->
    </td>
    <td onClick="document.location.href='#child4'">
      <a href='#child4' class="parent4">Parent4</a>
      <div id="child4">
        <h3>Child4</h3>
        <p> Here pops Info on something when parent4 is clicked.</p>
      </div>
      <!--EO Child2 -->
    </td>
  </tr>
</table>

CSS

a {
  color: white;
  text-decoration: none;
}

#child,
#child2,
#child3,
#child4 {
  position: absolute;
  display: none;
  top: 200px;
  z-index: 9;
  color: red;
}

#child:target,
#child2:target,
#child3:target,
#child4:target {
  display: block;
}

table.coolTable td {
  vertical-align: top;
  background-color: purple;
  color: green;
  cursor: pointer;
}

table.coolTable td:hover {
  background-color: green;
  color: green;
}

td a {
  vertical-align: top;
  display: block;
  width: 100%;
}