JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row vertical-align">
	<div class="col-md-3" style="background-color: #f1f1f1;">
		<div class="logo">
			<img src="http://placehold.it/120x50" alt="" class="img-responsive">
		</div>
	</div>
	<div class="col-md-6" style="background-color: #ffccff;">
		<div class="catergorias">
			<ul class="list-inline categorias_topo">
				<li class="list-inline-item">
					<a href="#">Categoria 1</a>
				</li>
				<li class="list-inline-item">
					<a href="#">Categoria 2</a>
				</li>
				<li class="list-inline-item">
					<a href="#">Categoria 3</a>
				</li>
				<li class="list-inline-item">
					<a href="#">Categoria 4</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="col-md-3" style="background-color: #f1f1f1;">
		BUSCA
	</div>
</div>
</div>

CSS

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}