JSFiddle - React, Tailwind, and code Playground

HTML

<header class="navbar navbar-fixed-top navbar-inverse">
  <div id="Buttons">
    <div id="Button1">
      <a class="btn btn-large btn-primary" href="/subjects/1">1</a>
    </div>
    <div id="Button2">
      <a class="btn btn-large btn-primary" href="/subjects/2">2</a>
    </div>
  </div>
  <div id= "SearchBar">
    <form accept-charset="UTF-8" action="/things" method="get">
      <div style="margin:0;padding:0;display:inline;">
        <input name="utf8" type="hidden" value="&#x2713;" />
      </div>
      <p class="p">
        <input id="search" name="search" type="text" />
        <button class="btn" type="submit"><i class="thing-search">Go</i></button>
      </p>
    </form>
  </div>
</header>

CSS

#Buttons {
  float: center;
  height: 100px;
  width: 900px;
  border:1px solid green;
}
#Button1 {
  width: 20px;
  display: inline;
  border:1px solid cyan;
}
#Button2 {
  width: 20px;
  display: inline;
  border:1px solid yellow;
}
#SearchBar {
  height: 30px;
  width: 30px;
  display: inline;
}
.navbar {
  height: 130px;
   border:1px solid red;
}
.p { margin:0; border:1px solid blue; }