JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="button">Меню 1</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore officia soluta, dicta maxime animi deserunt sint dolor? Nesciunt illum, quo ex quos, assumenda, placeat sint quod adipisci dicta quia cum.</div>
</div>

<div class="parent">
  <div class="button">Меню 2</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore officia soluta, dicta maxime animi deserunt sint dolor? Nesciunt illum, quo ex quos, assumenda, placeat sint quod adipisci dicta quia cum.</div>
</div>

CSS

.button {
  width: 200px;
  height: 50px;
  border-radius: 4px;
  background: #ccc;
  color: #fff;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
  cursor: pointer;
}

.parent {
  float: left;
  user-select: none;
  margin-right: 10px;
}

.content {
  width: 200px;
  border-radius: 4px;
  margin-top: 5px;
  background: #fff;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  display: none;
}

.parent.active .content {
  display: block;
}

JavaScript

document.addEventListener('click', function (e) {
  let active = document.querySelector('.parent.active') // активный блок

  if (e.target.classList.contains('button')) { // клик по кнопке
    let parent = e.target.closest('.parent')
    if (active !== parent) { // кнопка в неактивном блоке?
      parent.classList.add('active') // открываем
    }
    if (active) { // активный закрываем
      active.classList.remove('active')
    }
  } else if (!e.target.classList.contains('content')) { // клик не по контенту
		  active.classList.remove('active') // закрываем
  }
})