JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div class="wrapper">
			<div class="left_side col-xs-6 col-md-4">
				<div class="leftside_content right">
					<div class="">

					</div>
					<div class="navigation">		
						<span class="menu_header">Основное:</span>
						<ul class="menu">
							<li class="menu-item">Профиль</li>
							<li class="menu-item">Настройки</li>
						</ul>
						
						<span class="sort_header">Категории:</span>
						<ul class="sort">
							<li class="sort-item">Всё</li>
							<li class="sort-item">Избранное</li>
							<li class="sort-item">По приоритету</li>
							<li class="sort-item">По дате</li>
						</ul>
					</div>
					<div class="memo_logo"></div>
					<div class="memo_logo"></div>
					<div class="memo_logo"></div>
				</div>		
			</div>
			
			<div class="right_side col-xs-6 col-md-4">some text</div>
		</div>
	</body>

CSS

@font-face {
  font-family: Pacifico;
  src: url(assets/fonts/Pacifico.ttf);
}
@font-face {
  font-family: Monoid;
  src: url(assets/fonts/Monoid.ttf);    
}
@font-face {
  font-family: Cocomat-Regular-trial;
  src: url(assets/fonts/Cocomat-Regular-trial.ttf);    
}

body, html { 
  width: 100%;
  height: 100%;
}

.right {
  float: right;
}

li {
  list-style: none;
}

.memo_logo {
  font-family: Pacifico;
  font-size: 2em;
  color: #dc6161;
}

.wrapper {
  margin: 0px auto
  min-height: 100%;
}

.left_side {
  float: left;
  /*position: fixed;
  min-width: 50%;
  min-height: 100%;*/


  width: 50%;
  height: 100%;
  min-height: 100%;
  background-color: #292928;
}

.leftside_content {
  font-family: Monoid;
  font-size: 1.5em;
  color: #ffffff;
}

.right_side {
  float: right;
  width: 50%;
  height: 100%;
  min-height: 100%;
  background: #d1cece;
}