JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="header">шапка</div>
<div class="main">
    <div class="col1">1 колонка</div>
    <div class="col2">2 колонка
        <div class="text">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div>
    </div>
    <div class="col3">3 колонка</div>
</div>
<div class="footer">футер</div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}
.header {
    background-color: pink;
    height: 50px;
    position:fixed;
    width:100%;
    top:0;
    z-index: 100;
}

.main {
    margin-top: 50px;
}

.main div {
    min-height: 300px;
}

.col1 {
    background-color: grey;
    position: fixed;
    width:250px;
}
.col2 {
  background-color: #008000;
  left: 250px;
  position: absolute;
  right: 250px;
}
.col3 {
   background-color: blue;
    width:250px;
    float: right;
}

.clear {
    clear: both;
}


.footer {
    background-color: #FF0000;
    clear: both;
    position: relative;
    z-index: 100;
}

JavaScript

function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".main > div"));
});