JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 475px; float: left;">
<div>		
<button class="button_div">ЗАГОЛОВОК1</button><div class="window">

<div class="window_content">
<p align="center">ЗАГОЛОВОК1</p><p>Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p>
</div>
</div></div>

</div>



<div style="width: 400px; float: right;">

<div>
<button class="button_div">ЗАГОЛОВОК2</button><div class="window">

<div class="window_content">
<p align="center">ЗАГОЛОВОК2</p><p>
Content conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten conten</p>
</div>
</div></div>
</div>

CSS

.button_div
		{
		font-size: 17px;
		font-family: sans-serif;
		color: #fff;
		padding: 3px;
		border-radius: 5px;
		background-color: #0577cf;		
		border: none;
		margin: 5px;
		}
.button_div:hover
		{
		background: linear-gradient(to bottom, #0577cf, #87a5e7);
		}
.button_div:active
		{
		box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
		}
.window
		{
		/*display: none;*/
		position: absolute;
		width: 350px;
		height: 200px;
		background-color: #fff;
		border-radius: 8px;
		padding: 10px;
		border: 3px solid #3c88c9;
		}

.window_content
		{
		position:absolute;
		overflow: auto;
		height: 90%;
		margin-top: 10px;
		padding: 10px;
		right: 10px;
		left: 10px;
		}