<input type="text" value="" placeholder="type your search query here" class="search-box" />
     <input type="submit" value=" SEARCH " class="button-class" />

        .search-box{
            display: block;
            float: left;
            height: 32px;
            width: 100px;
        }

        .button-class{
            display: block;
            float: left;
            height: 40px;
            margin: -1px -2px -2px;
            width: 41px;
        }

OR View the code on Fiddle http://jsfiddle.net/Ggg2b/9/

In order to position your submit button on the right side of your search bar, you simply need to make some adjustments to your code. Remove the left alignment for the button and set the width to 34px as shown below:

 <input type="text" value="" placeholder="search text here" style="display: block;  width: 100px; height: 32px; margin: 0px; padding: 0px; float: left;" />
        <input type="submit" value=" OK "  style="display: block; margin: 0px;  width: 40px; height: 34px; padding: 0px; " />

To give the button a specific height, utilize CSS.

.btn {
     font-size: 16px;
     border: 0;           
     height: 34px;
     margin: 0;         
     float:left;
    } 

Next, assign a height to the textbox by using the style attribute and compare the heights.

<input type="text" value="" placeholder="search text here" style="height:28px;float:left;margin:0;" />
<input type="submit" value=" OK "  class='btn' />

Fiddle demonstration:http://jsfiddle.net/suhailvs0/Ggg2b/7/

To tackle this issue, consider placing the text input and button inside a container that utilizes grid layout. By implementing the following straightforward code snippet, make sure to set width constraints on the container to prevent it from expanding infinitely:

.joined {
  display: grid;
  grid-template-columns: 1fr auto;
}

<section class="joined">
  <input type="text"></input>
  <button>Go</button>
</section>

Here's a demonstration illustrating how the container will dynamically adjust in size with various dimension configurations:

.joined-2 {
  display: grid;
  grid-template-columns: 1fr auto;
  
  min-width:280px;
  width: 80vw;
}

input {
  height:100px;
}

<section class="joined-2">
  <input type="text"></input>
  <button>Go</button>
</section>

Include this content within a paragraph tag without the need for the float:left property.

 <p><input type="text" value="" placeholder="enter search text here" style="display: block;  width: 100px;        height: 32px; margin: 0px; padding: 0px;" />
 <input type="submit" value=" GO "  style="display: block; margin: 0px;  width: 20px; height: 32px; padding: 0px; " /></p>

Adjust the width by modifying the following code snippet:

<input type="submit" value=" OK "  style="display: block; margin: 0px;  width: 100px; height: 32px; padding: 0px; float: left;" />

I modified the HTML structure by enclosing the input boxes in div elements and setting the width and height on the divs instead of directly on the inputs.

HTML

<div class="mainCls">
    <div class="textCls">
        <input type="text" value="" placeholder="search text here" />
    </div>
    <div class="submitCls">
        <input type="submit" value=" OK " />
    </div>
</div>

CSS

input[type=text], input[type=submit] {
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: block;
}
div.mainCls {
    height: 35px;
    position: relative;
    border: 1px solid green;
    display:inline-block;
}
.mainCls>div {
    float: left;
    position: relative;
    height: 100%;
}
.textCls {
    width: 100px;
}
.submitCls {
    width: 30px;
}

See it in action on Fiddle

If your input boxes have fixed widths, you can simplify the structure by setting left: 100px; (assuming the text input's width is 100px) directly on the submit button without using additional child divs.

To organize them neatly, place the elements into a container and specify the fixed width and height of the container. Ensure that the elements within the container occupy only a certain percentage of the width. By using border-box: sizing;, you can easily add borders and padding to the elements without affecting the overall dimensions of the container.

Here is an example of how this can be done:

<div class="input-box">
    <input class="input-1" type="text" value="" placeholder="search text here" />
    <input class="input-2" type="submit" value="OK" />
</div>

In the CSS styling, define the properties as follows:

.input-1, .input-2{
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.input-1{
    width: 70%; /* input-1 + input-2 = 100% */
}
.input-2{
    width: 30%; /* input-1 + input-2 = 100% */
}
.input-box{
    height: 32px; /* Specify the desired height for the container */
    width: 200px; /* Specify the desired width for the container */
}

Check out the live demo which has been newly updated:

http://jsfiddle.net/Ggg2b/14/

Sharing my experience with setting up a search box in the hopes that it can benefit someone else.

<input type="text" name="id" id="searchbox" class="form-control" 
placeholder="Enter keywords here" style="width:300px;display:inline-block;margin-right: 25px;" />

<input type="submit" value="Search" class="btn-success" style="height:32px;
width:80px;font-weight:600;" />

On another note, if you need to preserve the value of a text box in ASP/MVC:

value="@Request["id"]" or for HTML alternatives, check out this source