JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="blog-masthead">
    <div class="container">
        <nav class="blog-nav"> <a class="blog-nav-item active" href="#">Home</a>
 <a class="blog-nav-item" href="#">New features</a>
 <a class="blog-nav-item" href="#">Press</a>
 <a class="blog-nav-item" href="#">New hires</a>
 <a class="blog-nav-item" href="#">About</a>

        </nav>
    </div>
</div>
<div class="container">
    <div class="blog-header">
         <h1 class="blog-title">The Bootstrap Blog</h1>

        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
    </div>
    <div class="row">
        <div class="col-sm-8 blog-main">
            <div class="tabs-form" role="tabpanel">
                <!-- Nav tabs (controles) -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#datosGenerales" aria-controls="home" role="tab" data-toggle="tab">Datos Generales</a>
                    </li>
                    <li role="presentation"><a href="#documentacion" aria-controls="profile" role="tab" data-toggle="tab">Documentación</a>
                    </li>
                </ul>
                <!-- END Nav tabs -->
                <!-- Tab panes (contenidos) -->
                <div class="tabla__wrap clearfix">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="datosGenerales">
                            <!-- wrap-row -->
                            <div class="wrap__row">
                                <div class="row">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
               ...

CSS

.blog-sidebar {
    border: 1px solid red;
}
.blog-main {
    border: 1px solid blue;
}

JavaScript

var sidebar, main;

var init = function () {

    sidebar = $('.blog-sidebar');
    main = $('.blog-main');


    //Resize Sidebar
    resizeHeight();
    $(window).resize(function () {
        resizeHeight();
    });


};

var getWindowWidth = function () {
    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
};

/* Ajustar altura sidebar  */
var resizeHeight = function () {
    //alert('init');
    var sidebarHeight = sidebar.outerHeight();
    var mainHeight = main.outerHeight();
    var windowWidth = getWindowWidth();
    console.log('sidebarH: ' + sidebarHeight + ' - contenidoH: ' + mainHeight);

    if (windowWidth < 767) {
        //alert('menor');
        sidebar.css('min-height', 'inherit');

    } else if (windowWidth > 767) {

        //I try to change temporary the height to inherit
        sidebar.css('min-height', 'inherit');
        // Try to asign the new height to the sidebar
        sidebar.css('min-height', mainHeight + 'px');
    }
};

init();