Theme-ing a Search Form

When themeing a Search form there is often the challenge of having the search field expand to fill the space but not collide or get covered by the search button.

[[{"type":"media","view_mode":"media_original","fid":"42","attributes":{"alt":"","class":"media-image","typeof":"foaf:Image"}}]]

The trick is to make them act like table cells.

HTML

<div class="faux-table">
   <div class="faux-row">
     <div class="faux-cell search-field">
         Search form field goes here
     </div> <!-- /faux-cell -->
     <div class="faux-cell search-submit">
          Search from submit button goes here
     </div><!-- /faux-cell -->
   </div> <!-- /faux-row -->
</div><!-- / faux-table -->

CSS

<style>
.faux-table {
   display: table;
   width: 100%;
}

.faux-row {
   display: table-row;
   width: 100%;
}

.faux-cell {
   display: table-cell;
}

.search-field {
  width: 100%;
}

.search-submit {
  width: 95px;
}
</style>

section: