JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<header>
  Header
</header>
<div class='row'>
  <div class=" navBar-Thema">
        <h3>Все тесты</h3>
       <ul>
         <li>Test 1</li>
         <li>Test 2</li>
         <li>Test 3</li>
         <li>Test 4</li>
         <li>Test 5</li>
       </ul>
        <button class='btn btn-primary'>Все тесты</button>
    </div>
    <div class="col-xs-9">
        <h1>Тесты</h1>
        <p>УСЛОВИЯ ПРОХОЖДЕНИЯ:</p>
        <p>Время на прохождение: 1 минута.</p>
        <p>Если Вы не прошли тест, пересдача возможна не ранее, чем через 14 дней. Результаты прохождения принимаются в расчет при начислении бонусов и премиальных, а также - при повышении должности.</p>
        <hr/>
        <p>
          Если Вы не прошли тест, пересдача возможна не ранее, чем через 14 дней. Результаты прохождения принимаются в расчет при начислении бонусов и премиальных, а также - при повышении должности.
        </p>
    </div>
</div>
<footer>
  Footer
</footer>

CSS

body{
  height:100%;
  width: 100%;
  background: #c7c4a8;
  display: flex;
  flex-direction: column
}
.row{
  display:flex;
}
.contant{
  margin-top: 50px;
}
.navBar-Thema{
  
  flex-grow: 1;
  background: rgba(35, 30, 29, 1);
}
header, footer{
  background: black;
}