JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <span id="button" class="two">Кнопка</span>
    <section id="hidden" class="one"><div class="bfull" style="left: 20px; top: 20px; width: 705px; height: 574px;">
<div class="bfull" style="left: 0px; top: 0px; width: 191px; height: 287px;">
<div class="wide center" style="top: 13px;">Извещение № Х Х Х </div>
<div class="wide center" style="top: 206px;">Кассир</div>
</div>
<div class="bfull" style="left: 191px; top: 0px; width: 514px; height: 287px;">
<div class="smallf" style="left: 452px; top: 10px;">Форма №ПД-4</div>
<div class="field" style="top: 24px; left: 7px; width: 500px;"> ОАО "Сбербанк России" , ИНН/КПП   7707083893  /  775003035  </div>
<div class="smallf center" style="top: 40px; left: 7px; width: 500px;">получатель платежа</div>
<div class="field" style="top: 54px; left: 7px; width: 350px;"><span class="field" style="top: 24px; left: 7px; width: 500px;">ОАО "Сбербанк России"</span></div>
<div class="smallf center" style="top: 70px; left: 7px; width: 350px;">Наименование банка</div>
<div class="field" style="top: 54px; left: 364px; width: 143px;"> 30301810500001000001 </div>
<div class="smallf center" style="top: 70px; left: 364px; width: 143px;">Расчетный счет</div>
<div class="field" style="top: 84px; left: 7px; width: 500px;">К/с   30101 810 4 0000 0000225   в ОПЕРУ Московского ГТУ Банка России, БИК   044525225  </div>
<div class="smallf center" style="top: 100px; left: 7px; width: 500px;">другие банковские реквизиты</div>
<div class="field" style="top: 114px; left: 7px; width: 500px; height:14px; overflow:hidden;">Иванов Иван Иваныч</div>
<div class="smallf center" style="top: 130px; left: 7px; width: 500px;">ФИО плательщика</div>
<div class="field" style="top: 144px; left: 7px; width: 500px;">М.О. г. Пупкин, ул. Иванова, д. 12 </div>
<div class="smallf center" style="top: 160px; left: 7px; width: 500px;">Адрес плательщика</div>
<div class="field" style="top: 174px; left: 7px; width: 500px;">Оказание услуг. , Без...

CSS

.main {
    width:500px;
    height:100px;
}
.one {
    display:none;
	-webkit-transition: visibility 0.3s ease;
	-moz-transition: visibility 0.3s ease;
	-o-transition: visibility 0.3s ease,;
	transition: visibility 0.3s ease;
}
.two {
    width:70px;
    display:inline-block;
    background-color:#0c0;
}
div { position: absolute; background: transparent; text-align: left; color: #000000; font-family: Arial; font-size: 9pt; }
         .center { text-align: center; }
         .wide { width: 100%; }
         .bfull { border: 1px #000000 solid; }
         .smallf { font-size: 6pt; }
         .field { border: none; border-bottom: 1px #000000 solid; font-style: italic; font-size: 8.5pt; }

JavaScript

window.onload = function(){

var   button = document.getElementById('button')
    , hidden = document.getElementById('hidden')
    ;
button.onclick = showElement;
hidden.style.display = 'none';

function showElement() {
    if (hidden.style.display == 'none') {
        hidden.style.display = 'block';
    } else {
        hidden.style.display = 'none';
    }
}

};