JSFiddle - React, Tailwind, and code Playground

HTML

<h1>ООО &laquo;АГРОСЕРВИС&raquo;</h1>
<nav class="navigation">
  <ul>
    <li><a href=#>Главная</a></li>
    <li><a href=#>Продукты</a></li>
    <li><a href=#>О нас</a></li>
    <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 {
  width: 100px; /* 200px */
  margin: 0px 10px;
  padding: 0px 10px;
  float: left;
  
  background-color: red;
}

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

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

.content {
  width: 100%;
  margin-left: 140px; /* 240px */
  
  background-color: blue;
}