html - Two divs side by side with one div absolute -

so have html

<div class="app-wrapper">   <div class="search-form"/>   <div class="results">      <div class="tabs"/>   </div> </div> 

search-form has absolute positioning , floated left. want tabs appear next it, @ top of page. note doesn't have tabs on screen(fixed not required).

right have

.search-form {   position: absolute;   width: 30%;   min-width: 200px;   max-width: 350px;   height: 100%;   min-height: 600px;   float: left; }  .tabs {   position: fixed;   border-bottom: 1px solid @section-border;   width: 70%;   height: 3.0em;   float: right;   left: 31%;   background: @tabs-background; } 

but doesn't work because on larger screens distance between tabs , search-form expands.

how tabs next search-form, fills rest of page, , distance between tabs , search-form not depend on screen size?

so realized tabs inside of div, css

.results {   width: 70%; } 

maybe looking for: http://jsbin.com/ofagoq/11/edit

the css:

.search-form {   background-color: red;   width: 30%;   min-width: 200px;   max-width: 350px;   height: 100%;   min-height: 600px;   float: left; }  .tabs {   background-color: green;   width: 70%;   height: 3.0em; }