show external div on hover

i created a navigation and now i want to add a previewer to get related options.

this div isnt connected to the navigation but it needs to show up on hover. i surrendered after "hours" of researching :/

Here is my simplified code

https://codepen.io/solevita/pen/JXEOQg

<div class="col">
  <div class="content">lorem ipsum</div>
</div>
<div class="col">
  <div class="navigation">
    <ul>
      <li><a href="#">punkt</a></li>
    </ul>
  </div>
</div>

as already told, the div I want to show is not in the navigation (for responsive reasons).

Is it possible to handle this with pure css or is javascript necessary? I hope this is not the case - my javascript skills are not existent :D

thanks for your help!