JSFiddle - React, Tailwind, and code Playground

HTML

<h1>ООО &laquo;АГРОСЕРВИС&raquo;</h1>
<nav class="navigation">
  <ul class="navigation-menu-ul">
    <li class="navigation-menu-li"><a href=#>Главная</a></li>
    <li class="navigation-menu-li"><a href=#>Продукты</a></li>
    <li class="navigation-menu-li"><a href=#>О нас</a></li>
    <li class="navigation-menu-li"><a href=#>Контакты</a></li>
  </ul>
</nav>
<article class="content">
  Мы являемся лидирующей компанией в начей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нашего роста не имеет ни границ, ни пределов. Сопротивление бесполезно. 
  Мы являемся лидирующей компанией в начей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нашего роста не имеет ни границ, ни пределов. Сопротивление бесполезно. 
  Мы являемся лидирующей компанией в начей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нашего роста не имеет ни границ, ни пределов. Сопротивление бесполезно. 
  Мы являемся лидирующей компанией в начей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нашего роста не имеет ни границ, ни пределов. Сопротивление бесполезно. 
  Мы являемся лидирующей компанией в начей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нашего роста не имеет ни границ, ни пределов. Сопротивление бесполезно. 
</article>

CSS

body {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  min-width: 470px;
}

h1 {
  margin: 10px;
  font-weight: normal;
  color: #2F3F77;
}


.navigation {
  width: 100px; /* 200px */
  margin: 0px 10px;
  float: left;
}

.navigation > ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.navigation > ul > li {
  margin: 5px 0px;
}

.content {
  width: 100%;
  width: calc(100% - 200px);
  float: left;
}