JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

<title>BSL</title>

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

<link href="css.css" rel="stylesheet" type="text/css"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<meta name="keywords" content=""/>
<meta name="description" content=""/>

<script type="text/javascript">
   

        
</script>
</head>
<body>

<div class="wrapper">

    <div class="layout">
       <div class="right-col column">Колонка 3</div><!--right-col-->

       <div class="left-col column" ></div><!--left-col-->
       
       <div class="center-col clearfix column" id="qwerty">

               <div class="header clearfix">
                   <h1 id="logo"><a href="#" title="Baltic Sea Logistics">Baltic Sea Logistics</a></h1><!--logo-->     
                   <div class="address-box">
                       141080, Московская область, г. Королев ул. </br>
                       Калининградская, 12 офис 402</br>
                    <b>тел: +7 (495) 651 62 20</b>
                </div><!--address-box-->
               </div><!--header-->
               <div class="main-menu-box">
                   <a href="#" class="button">Задать вопрос</a>

                <ul class="main-menu">

                    <li class="menu-item img-1 active-li-1">
                        <img src="img/1.png">
                        <div class="dt-wrap-for-ie clearfix"><div class="wrap-text" id="choice-1"><span>О КОМПАНИИ</span></div></div>
                    </li>

                    <li class="menu-item img-2">
                        <img src="img/2.png">
                        <div class="dt-wrap-for-ie clearfix"><div class="wrap-text" id="choice-2"><span>ОГНЕТУШАЩИЕ ГАЗЫ</span></div></div>
   ...

CSS

body,html {
    margin:0px; 
    padding:0px;
    text-align:center;
    height:100%;
    
}

img {border: none;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
* {margin:0;padding:0;}
a:active{border:0;}
a:visited{border:0;}

.wrapper{
    width:100%;
    overflow:hidden;
    min-height:100%;
    min-width: 1280px;
    z-index: 2;
    position: relative;
}
* html .wrapper {
    height: 100%; 
    z-index: 2;
    position: relative; 
}
    .layout { 
        
    }

      .left-col { 
          background: url(img/left-bg.png) repeat-y; 
           width: 205px;
           position: absolute;
           min-height: 100%;
           left: 0;

     }
 
/* Центральная колонка, контент, меню, шапка==============================================================*/
   .center-col { 
       background: #E0D2C7; 
       margin: 0 355px 0 205px; 
       background-image: url(img/center-bg.png); 
       min-width: 720px;
      }

.header{
    padding: 25px 40px 0 0px;
    height: 75px;
}
    #logo{
        width:287px;
        height:31px;
        text-indent:-9999px;
        overflow:hidden;
        float: left;
    }
        #logo a{
            display:block;
            width:287px;
            height:31px;
            background-image:url('img/logo.png');
            background-repeat: no-repeat;
        }

    .address-box{
        float: right;
        text-align: right;
        color: #3c3c3c;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
    }
.main-menu-box{
    position: relative;
    float: left;
    width: 100%;

}
.main-menu-box .button{
    margin: 0 40px 0 0;
    position: absolute;
    top:0;
    right: 0;
    z-index: 1;
}    
.button {
    padding: 7px 5px 7px 5px;
    font-size: 14px;
    font-family: 'Open-sans', sans-serif;
    text-decoration: none;
    margin: 0 0px 0 0;
    background-color: #632b8a;
    display: inline-block;
    line-height: px;
    float: right;
    color:...

JavaScript

var h = jQuery.noConflict();

    function setHeight(group, centHeight)
    {
        console.log(centHeight + ' passed to the function');
        if (h(window).height() < centHeight)
        {
            group.height(centHeight);
        }
        else {alert('something is wrong');}
    }

    h(document).ready(function(){
        h('.main-menu ul').addClass('hidden');

        setHeight(h(".column"), h('#qwerty').height());
        
        console.log('Init: current height is ' + h('#qwerty').height());

        h('.main-menu .menu-item').on('click', function(){
            h('.main-menu ul').addClass('hidden');
            console.log('Click on non-first element: current height BEFORE CLICK is ' + h('#qwerty').height());
            h(this).children('ul').stop().slideDown(500)
            .parent().siblings().children('ul').stop().slideUp(200);
            h('.main-menu').children(":first").removeClass('active-li-1');
            h('.home-page').stop().slideUp(200);

            console.log('Click on non-first element: current height is ' + h('#qwerty').height());
        });

        h('.main-menu').children(":first").on('click', function(){
            h(this).addClass('active-li-1')
            .siblings().children('ul').stop().slideUp(200);
            h('.home-page').stop().slideDown(200);

            console.log('Click on  element: current height is ' + h('#qwerty').height());
        });
        

        

        h(window).resize(function () {
            
        });

        h(window).scroll(function () {
            
        });

    });