JSFiddle - React, Tailwind, and code Playground

HTML

<body>
			<div id="wraper">
				<div id="header">
				</div>
				<div id="sidebarL">
				</div>
				<div id="sidebarR">
				</div>
				<div id="content">
					<div id="a">
						<div class="tablica">
						  <div class="yacheika"><img src="images/01.jpg">Блок 1</div>
						  <div class="yacheika">Блок 2</div>
						  <div class="yacheika">Блок 3</div>
						</div>
						<div class="tablica">
						  <div class="yacheika"><img src="images/01.jpg">Блок 4</div>
						  <div class="yacheika">Блок 5</div>
						  <div class="yacheika">Блок 6</div>
						</div>
						<div class="tablica">
						  <div class="yacheika"><img src="images/01.jpg">Блок 7</div>
						  <div class="yacheika">Блок 8</div>
						  <div class="yacheika">Блок 9</div>
						</div>
					</div>
				</div>
			</div>
			<div id="footer">
			5555
			</div>
		<body>

CSS

#wraper {
outline:1px solid #cccccc;
margin:0 auto;
}

#header {
height:77px;
background-color:#FF00AE;
outline:1px solid #cccccc;
position:relative;
}

#sidebarL {
/*height:77px;*/
width:200px;
background-color:#D0FF00;
outline:1px solid #cccccc;
float:left;
}

#sidebarR {
/*height:77px;*/
width:200px;
background-color:#3AE2CE;
outline:1px solid #cccccc;
float:right;
}

#content {
/*height:200px;*/
background-color:#DB0800;
outline:1px solid #cccccc;
margin-left:200px;
margin-right:200px;
}

.tablica {
display: table; 
width: 100%; 
height:33.33%;
border-spacing: 10px 10px; 
} 

.yacheika {
display: table-rows; 
float:left;
width: 33.33%; 
outline:1px solid #cccccc;
font:12px ssans-serif;
text-align:center;
}
#footer {
height:20px;
background-color:#AB4533;
outline:1px solid #cccccc;
}

JavaScript

$(document).ready(function() {
 function setEqualHeight(columns)
 {
 var tallestcolumn = 0;
 columns.each(
 function()
 {
 currentHeight = $(this).height();
 if(currentHeight > tallestcolumn)
 {
 tallestcolumn  = currentHeight;
 }
 }
 );
 columns.height(tallestcolumn);
 }
 setEqualHeight($("#sidebarL,#sidebarR,#content"));
});