JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<div class="layout">
  <div class="nav">Нав (% резина)</div>
	<div class="content">Контент (фикс)</div>
	<div class="sidebar">Сайдбар (резина)</div>
</div>
<!-- Порядок блоков может не соотвествать порядку на result, но так нужно для работы float. Сначала должны идти плавующие блоки. -->

CSS

.layout {
	overflow: hidden;
}
.nav {
	background-color: lightgreen;
	width: 40%; 
	float: left;
}
.sidebar {
	background-color: #c3c;
	margin: 0 200px 0 40%;
}
.content {
	background-color: lightblue;
	width: 200px; 
	float: right;
}