Flexbox to the rescue

Lay out the search bar and the top bar using flexbox because the
vertical centering is much better and easier using flexbox instead
of floats and line heights.

As long as we're using only features easily supported in the 2012
and final spec the -ms prefix gets us IE10. All other browsers we
care about should be supported already by the compass mixins.

h/static/styles/simple-search.scss

+@import 'compass/css3/flexbox';
+
 @import "base.scss";
 @import "mixins/icons";
 
 .simple-search-form {
-  @include clearfix;
+  @include display-flex;
+  @include flex-flow(row nowrap);
+
+    /* IE10 support */
+  display: -ms-flexbox;
+  -ms-flex-flow: row nowrap;
+
   position: relative;
-  padding: 0 2em;
   color: $gray-dark;
 }
 
 .simple-search-icon {
-  position: absolute;
-  left: 0;
-  top: 0;
+  @include order(0);
 }
 
 :not(:focus) ~ .simple-search-icon {
@@ -19,16 +24,18 @@
 }
 
 input.simple-search-input {
-  outline: none;
+  @include flex-grow(1);
+  @include order(1);
+
+  /* IE10 support */
+  -ms-flex: 1;
+  -ms-flex-order: 1;
+
   color: $text-color;
-  width: 100%;
   border: none;
+  outline: none;
   padding: 0;
 
-  .simple-search-inactive &:not(:focus) {
-    border-color: #f3f3f3;
-  }
-
   &:disabled {
     background: none;
     color: $gray-light;

h/static/styles/topbar.scss

+@import 'compass/css3/flexbox';
+
 @import 'base';
 @import 'mixins/responsive';
 
@@ -6,31 +8,44 @@
   border: solid 1px $gray-lighter;
   border-style: solid none;
   height: 30px;
+  font-size: 14px;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   z-index: 5;
+}
 
-  .inner {
-    * {
-      font-size: 14px;
-      line-height: 28px;
+.topbar .inner {
+  @include display-flex;
+  @include flex-flow(row nowrap);
+  @include align-items(center);
+  @include justify-content(space-between);
 
-      .btn-icon {
-        font-size: 18px;
-      }
-    }
+  /* IE10 support */
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+  -ms-flex-flow: row nowrap;
+  -ms-flex-pack: justify;
 
-    @include respond-to(wide-handhelds handhelds) {
-      margin: 0 .72em;
-    }
+  height: 28px;
+
+  @include respond-to(wide-handhelds handhelds) {
+    margin: 0 .36em;
   }
 }
 
+.topbar .inner > * {
+  margin-left: .36em;
+}
+
+.topbar .inner .simple-search {
+  @include flex-grow(1);
+  -ms-flex: 1;  /* IE10 support */
+}
+
 .topbar .btn {
   color: $gray-light;
-  height: 28px;
   min-width: 28px;
 
   border: 0;