JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <input type="checkbox" id="menu[1]" class="trigger">
  <a href="#" class="ad">ad1</a>
  <img class="img" src="https://themify.me/demo/themes/pinshop/files/2012/12/man-in-suit2.jpg"><span class="header">
    Репетиторы
  </span><span class="menu">
    <ul>
      <li><a href="#">menu11</a></li>
      <li><a href="#">menu12</a></li>
      <li><a href="#">menu13</a></li>
      <li><a href="#">menu14</a></li>
    </ul><ul>
      <li><a href="#">menu11</a></li>
      <li><a href="#">menu12</a></li>
      <li><a href="#">menu13</a></li>
      <li><a href="#">menu14</a></li>
    </ul><ul>
      <li><a href="#">menu11</a></li>
      <li><a href="#">menu12</a></li>
      <li><a href="#">menu13</a></li>
      <li><a href="#">menu14</a></li>
    </ul><ul>
      <li><a href="#">menu11</a></li>
      <li><a href="#">menu12</a></li>
      <li><a href="#">menu13</a></li>
      <li><a href="#">menu14</a></li>
    </ul>
    <label class="show" for="menu[1]">&gt;&gt;</label>
    <label class="hide" for="menu[1]">&lt;&lt;</label>
  </span>
</div>
<div class="block">
  <input type="checkbox" id="menu[2]" class="trigger">
  <a href="#" class="ad">ad2</a>
  <img class="img" src="https://themify.me/demo/themes/pinshop/files/2012/12/man-in-suit2.jpg"><span class="header">
    Юристы
  </span><span class="menu">
    <ul>
      <li><a href="#">menu11</a></li>
      <li><a href="#">menu12</a></li>
      <li><a href="#">menu13</a></li>
      <li><a href="#">menu14</a></li>
    </ul><ul>
      <li><a href="#">menu11</a></li>
      <li><a href="#">menu12</a></li>
      <li><a href="#">menu13</a></li>
      <li><a href="#">menu14</a></li>
    </ul><ul>
      <li><a href="#">menu11</a></li>
      <li><a href="#">menu12</a></li>
      <li><a href="#">menu13</a></li>
      <li><a href="#">menu14</a></li>
    </ul><ul>
      <li><a href="#">menu11</a></li>
      <li><a href="#">menu12</a></li>
      <li><a href="#">menu13</a></li>
      <li><a href="#">menu14</a></li>
   ...

CSS

.block{
  min-width:600px;
  position:relative;
}
.ad{
  display:none;
  top:0;
  bottom:0;
  left:70%;
  right:0;
  position:absolute;
  z-index:0;
  text-align:center;
}
.img{
  display:inline-block;
  width:15%;
  vertical-align:top;
}
.header{
  display:inline-block;
  width:16%;
  padding:0 2%;
  vertical-align:top;
}
.menu{
  display:inline-block;
  width:60%;
  vertical-align:top;
  position:relative;
}
.menu>ul{
  display:inline-block;
  width:23%;
  padding-left:2%;
  margin:0;
}
.trigger{
  display:inline-block;
  width;0;
  height;0;
  border:0;
  margin:0;
  padding:0;
  position:absolute;
  z-index:-1;
  opacity:0;
}
.show{
  display:none;
  position:absolute;
  right:10px;
  bottom:10px;
  cursor:pointer;
}
.hide{
  display:inline-block;
  position:absolute;
  right:10px;
  bottom:10px;
  cursor:pointer;
}
.trigger:checked~.menu{
  width:30%;
}
.trigger:checked~.menu>ul{
  width:46%;
  padding-left:4%;
}
.trigger:checked~.menu>ul:nth-child(3){
  display:none;
}
.trigger:checked~.menu>ul:nth-child(4){
  display:none;
}
.trigger:checked~.menu>.show{
  display:inline-block;
}
.trigger:checked~.menu>.hide{
  display:none;
}
.trigger:checked~.ad{
  display:inline-block;
}