JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="filters">
    <div class="filters__left">
      <div class="filters__left-inner">Фильтр</div>
    </div>
    <div class="filters__right">
      <div class="filters__right-inner">сортировка</div>
    </div>
  </div>
  
  <div class="main">
  
    <div class="main__left-column">
      <div class="main__left-column-inner">
        <ul class="list">
          <li class="list__items">dsadsad</li>
          <li class="list__items">dsagfdsdsad</li>
          <li class="list__items">dsadgsad</li>
          <li class="list__items">dsagfddsad</li>
          <li class="list__items">dsaddfsad</li>
          <li class="list__items">dsadgfdsad</li>
        </ul>
      </div>
    </div>
    
    
    <div class="main__right-column">
      <div class="main__right-column-inner">
        
        <div class="main__items">1</div>
        <div class="main__items">2</div>
        <div class="main__items">3</div>
        <div class="main__items">4</div>
        <div class="main__items">5</div>
        
      </div>
    </div>
    
  </div>
</div>

CSS

* {
  margin: 0px;
}
.block {
  width: 100%;
}
.filters {
  height: 80px;
}
.filters,
.main {
  width: 100%;

  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  align-content: center;
}
.filters__left,
.main__left-column {
  min-width: 340px;
  flex: 1 1 340px;
  background-color: green;
}
.filters__right,
.main__right-column {
  min-width: 800px;
  flex: 1 1 800px;
  background-color: red;
}
.main__items {
  width: 390px;
  height: 200px;
  display: inline-block;
  background-color: yellow;
  margin: 5px;
}
.filters__left-inner,
.main__left-column-inner {
  width: 340px;
  background-color: purple;
}
.filters__right-inner,
.main__right-column-inner {
  width: 800px;
  background-color: blue;
}
.filters__left,
.main__left-column {
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  align-content: center;
}

.main__right-column-inner {
  min-height: 400px;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  align-content: center;
}