JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="wrapper-main">
    <div class="header">
    </div>
    <div class="wrapper-inner">
      <div class="navigation">
        <ul>
          <li>Главная</li>
          <li>Новости</li>
          <li>О компании</li>
          <li>Продукция</li>
          <li>Контакты</li>
        </ul>
      </div><!--
   --><div class="content">
        <p>Декретное время пространственно неоднородно. Ганимед ищет азимут, тем не менее, Дон Еманс включил в список всего 82-е Великие Кометы. Гелиоцентрическое расстояние постоянно. Каллисто ищет космический лимб, однако большинство спутников движутся вокруг
        своих планет в ту же сторону, в какую вращаются планеты. Эпоха решает радиант, хотя это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа.</p>
      </div>
    </div>
    <footer>
      &copy; Copyright ME, 2013
    </footer>
  </div>
</body>

CSS

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background-color: #001646;
  color: #FFF;
  font-family: "Arial", serif;
}

.wrapper-main {
  width: 970px;
  margin: 0 auto;
  padding: 5px;
}

.header {
  height: 280px;
  background-image: url(./img/header.jpg);
}

.wrapper-inner {
  height: 100%;
  /*display: inline-block;*/
  background-color: #000;
}

.navigation {
  display: inline-block;
  width: 20%;
  height: 100%;

  background-color: blue;
}

.navigation ul {
  font-weight: bold;
}

.navigation li {
  list-style-type: none;
  height: 30px;
}

.content {
  display: inline-block;
  width: 80%;
  height: 100%;

  background-color: green;
}

.content p {
  font-family: "Verdana";
  font-size: small;
  text-align: justify;
  background-color: red;
}

footer {
  height: 30px;
  background-color: #103898;
  text-align: center;
  line-height: 30px;
  white-space: nowrap;
}