JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="box">
  	<div class="close-btn">
     Закрой меня X
    </div>
    <div class="content">
    	Окно # 1
    </div>
  </div>
	<div class="box">
    <div class="close-btn">
     Закрой меня X
    </div>
    
    <div class="content">
      Окно # 2
    </div>
  </div>
</div>

CSS

.container {
  width: 600px;
  display: flex;
}

.box {
  height: 150px;
  border: 1px solid;
  margin: 5px;
  flex: 1;
}

.close-btn {
  border: 1px solid;
  border-radius: 5px;
  padding: 5px;
  margin: 5px 5px 0 auto;
  width: max-content;
  cursor: pointer;
}

.content {
  text-align: center;
  padding-top: 30px;
  
}

JavaScript

const box1 = document.querySelector('.box')
const box2 = document.querySelectorAll('.box')[1]

box1.addEventListener('click', () => box1.hidden = true)
box2.addEventListener('click', () => box2.hidden = true)