JSFiddle - React, Tailwind, and code Playground

by Cale Bergh

HTML

<header class="clearfix">
  <div class="column-left">
    <h1>Perfect fit.</h1>
    <p class="subheading">Even when resized.</p>
  </div><div class="column-right">
      <button>vertical centered</button>
  </div><!--.column-right-->
</header>

CSS

html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
header {
  background: red;
  color: #fff;
  padding: 0.5em;
}
header h1 {
  font-size: 2em;
  margin: 0 0 0.2em;
}
header p {
  margin: 0;
}
header button {
  height: 40px;
  width: 70px;
}
.column-left {
  display:inline-block;
  width: 70%;
  vertical-align: middle;
}
.column-right {
  width: 29%;
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/* responsive */
@media (min-width: 200px) {
  header {
    padding: 1em;
  }
}
@media (min-width: 300px) {
  header {
    padding: 1.5em;
  }
}
@media (min-width: 400px) {
  header {
    padding: 2em;
  }
}
@media (min-width: 500px) {
  header {
    padding: 2.5em;
  }
}
@media (min-width: 600px) {
  header {
    padding: 3em;
  }
}
/* helpers */
.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}