JSFiddle - React, Tailwind, and code Playground

HTML

<h1>ООО &laquo;АГРОСЕРВИС&raquo;</h1>
<div class="wrapper">
  <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>
</div>

CSS

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

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

.wrapper {
  min-width: 470px;
}

.navigation {
  max-width: 200px;
  margin: 0px 10px;
  padding: 0px 10px;
  float: left;
}

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

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

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