JSFiddle - React, Tailwind, and code Playground

HTML

<script src="bootstrap"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="row-height">
      <div class="logo-text col-middle">
        <span>Logo Text</span>
      </div>
      <div class="menu-social-outer col-middle text-justify">
        <div class="menu">
          <a href="#">Menu Link</a>
        </div>
        <div class="social">
          <a href="#">Facebook</a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.logo-text {
  width: 100px;
}
.menu,
.social {
    display:inline-block;
}

.menu a {
  color:red;
}

.social a {
  color:green;
}

.row-height {
    display: table;
    table-layout: fixed;
    width: 100%;
    height:100%;
}

.col-middle {
    display: table-cell;
    float: none;
    height: 100%;
    vertical-align: middle;
}