JSFiddle - React, Tailwind, and code Playground

HTML

<header><h2>ООО &laquo;Агросервис&raquo;</h2></header>

<div class="container clearfix">
  <nav>
    <ul>
      <li><a href="">Главная</a></li>
      <li><a href="">Продукты</a></li>
      <li><a href="">О нас</a></li>
      <li><a href="">Контакты</a></li>
    </ul>
  </nav>
  
  <article>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo a asperiores quasi suscipit incidunt inventore deserunt iusto eum temporibus enim debitis placeat aliquam illum exercitationem laudantium, quidem reprehenderit et commodi.
  </article>
</div>

CSS

body {
  font-family: "Trebuchet MS", sans-serif;
  background-color: #fff;
}

header h2 {
  margin: 10px;
  color: #34437A;
}

.container {
  border: 1px solid #ccc;
}

  .container article {
    margin-left: 220px;
    padding-right: 10px;
  }

  .container nav {
    float: left;
    width: 220px;
  }

    .container nav ul {
      list-style: none;
      margin: 0 10px;
      padding: 0;
    }

      .container nav ul > li {
        padding: 5px 0;
      }

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}