html - Make two elements with dimensions inline -

i trying make 2 elements in header, pink section , green section, inline ( in 1 line , not wrapping new line green section currently).

however, can't use display:inline; items need have width.

how can achieve both of these elements being inline , keep widths?

here page elements are: https://dl.dropboxusercontent.com/u/270523/help/new.html

the inline-block solution:

#logo {     width: [width1]%;     min-width: 225px;     background: pink; }  #input{        width: [width2]%;     background: green; }  #input,#logo {     display: inline-block;     height: 100%;     vertical-align:top; } 

where [width1] + [width2] = 100%. work, need delete whitespaces between 2 elements.

so not now:

<section id="logo"></section> <section id="input">     <input id="searchinput" type="text" name="search" autocomplete="off"> </section> 

but instead:

<section id="logo"></section><section id="input">     <input id="searchinput" type="text" name="search" autocomplete="off"> </section>