JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="template.css">

    </head>
    
    <body>
        <div id="wrapper">
        <div id="wrapper_content">
                <div id="sideLeftSep"></div>
                <div id="container">
                        <div class="mod-wrap1">
                            <div class="mod-wrap2">
                                <div class="mod-wrap3">
                                    <div id="leftcolumn">Левая колонка</div>
                                    <div class="item-page">
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст, текст,текст,текст,текст,текст,
                                        текст, текст, текст,...

CSS

@charset "utf-8";
/* CSS Document */


/* ------------------------------------- ????? ------------------------------------- */
 html {
  height:100%;
  width:100%;
}

 body {
  margin:0px;
  padding:0px;
  width:100%;
  min-height:100%;
  background-color:#5FA8D0;
}

#wrapper {
    float: left;
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow:hidden;
}

#wrapper_content
{
    float: left;
    position: relative;
    min-height:100%;
    width: 100%;
    left:50%;
    margin-right:-100%;
}

#container
{
    float: left;
    position: relative;
    left:-25%;
    width: 1%;
    min-width:950px;
    background-color:#F3F9FC;
    overflow:hidden;
     min-height: 100%;
}

#sideLeftSep {
    float: left;
    width: 2px;
    margin-left: -2px;
    position: relative;
    left:-25%;
    background-color:#F00;
    padding-bottom: 100%;
    padding-bottom: 20000px;
    margin-bottom: -20000px;
}

#sideRightSep  {
    width: 2px;
    position: relative;
    left:-25%;
    margin-left:950px;
    background-color:#F00;
    padding-bottom: 100%;
    padding-bottom: 20000px;
    margin-bottom: -20000px;
}


.mod-wrap1
{
    float: left;
    width: 100%;
    background: #89FFA2;
}

.mod-wrap2
{
    clear: left;
    float: left;
    width: 100%;
    position: relative;
    right: 25%;
    background: #FFA7A7;
}

.mod-wrap3
{
    float: left;
    width: 100%;
    position: relative;
    right: 50%;
    background: #FFF689;
    
}

#none, #none1
{
    width: 0px;
}

.item-page
{
    float: left;
    width: 48%;
    position: relative;
    left: 78%;
    overflow: hidden;
    padding-top:10px;
}

#leftcolumn
{
    float: left;
    width: 23%;
    position: relative;
    left: 76%;
    overflow: hidden;
    padding-top:10px;
    padding-bottom:35px;
}

#rightcolumn
{
    float: left;
    width: 23%;
    position: relative;
    left: 80%;
    overflow: hidden;
    padding-top:10px;
    padding-bottom:100px;
}

/* ------------------------------------- ??????...