JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

  <div class="leftblock">
  
    <a href="#" class="logo">promo</a>
    
    <nav class="navigate">
    
      <nav class="mainmenu">
        <a href="#">Сайт</a>
        <a href="#">Сайт</a>
        <a href="#">Сайт</a>
        <a href="#">Сайт</a>
      </nav>
      
      <nav class="innermenu">
        <a href="#">Новости</a>
        <a href="#">Новости</a>
        <a href="#">Новости</a>
        <a href="#">Новости</a>
        <a href="#">Новости</a>
        <a href="#">Новости</a>
      </nav>
    
    </nav>
    
  </div>
  
  <div class="rightblock">
    <p>Равным образом сложившаяся структура организации обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. С другой стороны новая модель организационной деятельности требуют от нас анализа позиций, занимаемых участниками в отношении поставленных задач. Таким образом сложившаяся структура организации обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации. Задача организации, в особенности же новая модель организационной деятельности в значительной степени обуславливает создание дальнейших направлений развития.</p>
Не следует, однако забывать, что постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание систем массового участия. Задача организации, в особенности же дальнейшее развитие различных форм деятельности представляет собой интересный эксперимент проверки дальнейших направлений развития.
<p>Значимость этих проблем настолько очевидна, что постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации. Товарищи! консультация с широким активом представляет собой интересный эксперимент проверки системы обучения кадров, соответствует насущным потребностям. Разнообразный и богатый опыт укрепление и развитие...

CSS

* { margin: 0; padding: 0; }
body {
  font-family: arial;
}
.container {
  display: flex;
  min-height: 100vh;
}
.leftblock {
  width: 250px;
  min-height: 100vh;
  background: #282C37;
}
.logo {
  width: 250px;
  height: 60px;
  border-bottom: 1px solid #787878;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  line-height: 60px;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
}
.navigate {
  display: flex;
  height: calc(100% - 61px);
}
.mainmenu {
  width: 100px;
  background: #313541;
  height: 100%;
}
.mainmenu a {
  display: block;
  text-align: center;
  line-height: 100px;
  text-decoration: none;
  width: 100px;
  height: 100px;
  color: #6C707C;
}
.mainmenu a:hover {
  color: #ffffff;
  background: #E25C5B;
}
.innermenu {
  width: 150px;
  height: 100%;
}
.innermenu a {
  display: block;
  width: 120px;
  color: #ffffff;
  line-height: 30px;
  padding: 0 15px;
  text-decoration: none;
}
.innermenu a:hover {
  background: #1E222D;
}
.rightblock {
  min-height: 100vh;
  padding: 20px 25px;
  box-sizing: padding-box;
}