JSFiddle - React, Tailwind, and code Playground

by sensei

HTML

<h4 class="hideSickBox"> - Перенесенные заболевания в детстве. <img src="img/quest.png"> </h4>
                        <div class="sick_box">      
                          <div class="table_sick">
                              <div class="table_row">
                                  <p class="left_col">Скарлатина</p><p class="right_col">в 10 лет.</p>
                                  </div>
                              <div class="table_row">
                                  <p class="left_col">Скарлатина</p><p class="right_col">в 10 лет.</p>
                              </div>
                              <div class="table_row">
                                  <p class="left_col">Скарлатина</p><p class="right_col">в 10 лет.</p>
                              </div>
                              <div class="table_row">
                                  <p class="left_col">Скарлатина</p><p class="right_col">в 10 лет.</p>
                              </div>
                              <div class="table_row">
                                  <p class="left_col">Скарлатина</p><p class="right_col">в 10 лет.</p>
                              </div>
                              <div class="table_row">
                                  <p class="left_col">Скарлатина</p><p class="right_col">в 10 лет.</p>
                              </div>
                              <div class="table_row">
                                  <p class="left_col">Скарлатина</p><p class="right_col">в 10 лет.</p>
                              </div>
                          </div>
                          
                          <div class="remove_sick">
                    			<input type="button" name="add" value="Добавить">
                        		<br/>
                        		<input type="button" name="clear" value="Очистить">
                          </div>
                    </div><!--sick_box-->

CSS

h4 {
	margin:10px auto;
}
.sick_box {
	overflow:hidden;
}
.table_sick {
	width:430px;
	height:240px;
	border:1px #000 solid;
	float:left;
}
.table_row {
 overflow:hidden;
 margin: 10px 5px 0 5px;
 padding-bottom:4px;
 border-bottom: 2px #000 dotted;
}
.left_col {
	float:left;
}
.right_col {
	float:right;
}
.remove_sick {
	float:right;
}
.remove_sick input {
	width:140px;
	height:40px;
	margin-bottom:20px;
	background:#FFF;
	border: 2px #209DD9 dashed;
}

JavaScript

$('.hideSickBox').click(function() {
	$('.sick_box').slideToggle(800);
});