html - what is the issue with elements align -

i'm trying make search box this:

as see cant set them align @ all.

the real problem is, cant set align in browser. example: have put 2px top in chrome , 3px top in ff

how can that:

here jfiddle

css:

.home_kadr { padding:10px; text-align:center;} .home_search {     font-size:16px!important;     font-family:arial!important;     font-style:italic!important;     padding:14px!important;     border:1px solid #d6bf99!important;     border-radius:2px!important;     margin:0px!important;     /*border-right:none!important;*/     border-top-right-radius:0px!important;     border-bottom-right-radius:0px!important; } .home_btn {     width:115px; height:42px;     background:url(../images/home_search.png);     display:inline-block;     font-family:'b koodak';     font-size:20px;     padding:8px 8px 0px 8px;     color:#fff;     text-align:center;     border:none; } 

html:

    <div class="home_kadr">         <div class="home_btn">جستجو</div><input type="text" name="fld_domainname" id="fld_domainname" class="wd-300 en home_search" />     </div> 

see here updated link jsfiddle.

this may solve problem every browser.

changes are:

 .home_kadr{  display:inline-block;  }   .home_search {  float:left;  }