JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div class="wrap">
  <div class='widget widget-l'>
    <h2 class="widget-title">бла бла бла</h2>

    <div class="widget-content">
      <div class="col-left">
        <ul>
          <li>ggggg</li>
          <li>hhhhh</li>
        </ul>
      </div>
      <div class="col-right">
        <ul>
          <li>ggggg1</li>
          <li>hhhhh1</li>
        </ul>
      </div>
    </div>
  </div>
  <div class='widget widget-r'>
    <h2 class="widget-title">бла бла бла 2</h2>

    <div class="widget-content">
      <div class="col-left">
        <ul>
          <li>ggggg3</li>
          <li>hhhhh3</li>
        </ul>
      </div>
      <div class="col-right">
        <ul>
          <li>ggggg4</li>
          <li>hhhhh4</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

.col-left {
  width: 45%;
  display: inline-block;
}

.col-right {
  width: 45%;
  display: inline-block;
}

.wrap {
    position: relative;
}

h2.widget-title {
    position: absolute;
    top: 0;
}

.widget-l {
    padding-top: 30px;
}

.widget.widget-r .widget-title {
    right: 0;
}

.widget-content {
    display: none;
}

JavaScript

$('.widget-title').hover(
function(){
  $(this).next('.widget-content').show();
},
function(){
    $(this).next('.widget-content').hide();
});