JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <p>Левая колонка, здесь может быть меню, форма логина, календарь, мелкие баннеры и всякое такое прочее.</p>
    <p>Фактически она кончается у красной пунктирной линии, но кажется, что тянется до низа.</p>
</div>

<div class="article">
    <h1>Основная колонка</h1>
    <p>Тут может быть основная информация, комменты к ней и вообще что угодно.</p>
    <p>Можно подвигать окно и посмотреть, что бывает при разных размерах.</p>
</div>

CSS

html, body {
    height: 100%; /* растянем страницу на всё окно по умолчанию */
    margin: 0;
    padding: 0;
    background: #ffc;
}

.nav {
    float: left;
    width: 200px;
    margin-right: -200px; /* теперь колонка "наезжает" на границу соседа */
    background: #cfc; /* фон совпадает с цветом этой границы */
    border-bottom: 1px dashed #f00;
    /* хак для IE7, чтобы левая колонка нормально отображалась в нем */
    /* для старых IE почти всегда нужны "костыли", но лучше выносить их в отд. файл */
    *position: relative;
}

.article {
    min-height: 100%;
    border-left: 200px solid #cfc;
    background: #ffc; /* фон совпадает с фоном внешнего контейнера */
}

p {
    margin: 1em;
}

h1 {
    padding: .5em;
    font-size: 2em;   
}