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;
}

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

.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 {
  max-width: 230px;
  width: calc(100% - 200px);
  margin-right: -100%;
  float: left;
}