JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="header">Шапка</div>
  <div class="clearfix">
  <div class="content">Контент</div>
  <div class="sidebar">сайдбар</div>  
  </div>
  <div class="footer">Футер</div>
</div>

CSS

.header {
  height:50px;
  background: green; 
}

.content {
  height:250px;
  background: yellow;
  width: 70%;
  float: left;
}
.sidebar {
  width:30%;
  float: right;
  height:250px;
  background: blue;
}

.footer {
  height:75px;
  background: green; 
}


.clearfix:after {
	box-sizing: border-box;
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */