<header>
  <div class="left">
    <a href="#">
      <i class="fa fa-search fa-lg"></i></a>
  </div>
  <h2><a href="#">LOGO</a></h2>
  <div class="right">
    <a href="#">
      <i class="fa fa-bars fa-lg"></i></a>
  </div>
</header>
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #eee;
  margin: 0;
}

header {
  background: #A18E5C;
  color: #fff;
  display: table;
  padding: 6px;
  text-align: center;
  width: 100%;
}

.left,
h2,
.right {
  display: table-cell;
  vertical-align: middle;
}

.left a,
.right a {
  border: 1px solid #fff;
  border-radius: 5px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  width: 44px;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

a {
  color: #fff;
  display: inline-block;
  text-decoration: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.