How to Remove the Extra Space in in This Search Box (Between Input Field and Button)

Removing the space between the input field and button in a search bar

I think the input-group-btn or input-group-text(made-up name for search textarea) has non-zero margins between them, so make them zero, and try enclosing them in a div and then apply same margins for the enclosing div.

How to remove the space between Text Input and Submit Button?

Simply put them together :)

<label>
    <span class="screen-reader-text">Search for:</span>
    <input type="search" class="search-field" placeholder="Search up in hur" value="" name="s" title="Search for:" /></label><input type="submit" class="search-submit" value="Search" />

Extra space when input and button are next to each other

The space is there because a line jump (return) is considered a white space. To avoid this you can:

1. Put the input and button tags right next to each other (harder to read your code)
2. Use the "comment hack" where you'd write your code with a <!-- right after the <input> and --> right before the <button>.
3. Use display: flex on your form to avoid the whitespace being rendered.

For your button positioning issue, it's related to the alignment on the baseline. vertical-align: bottom; on your button will fix this.

See the solution on this Fiddle

remove gap between input and button

You can put your html content inline. That will remove the space without having margin-left as negative

<input class="txt" type="text" name="name"><button class="btn">Submit</button>

Also to put them align in a horizontal row, you need to consider giving some less % to input.

Demo - http://jsfiddle.net/RahulB007/rm9etsny/5/

How to remove the extra space between label and input?

The only way to tackle this issue is by setting margin or padding to the two elements.
I would advise you to set padding & margin 0 for both label and input and if you still want to reduce the gap, sometimes you will probably need to set a negative margin which is not recommended but still does the job.
try this on your label

.label {
   /*margin-bottom: -5px;*/
    margin-bottom: 0px
  }

In HTML

<label class="lable">...</label>

Again, this practice of adding a negative margin is highly discouraged.

EDIT: I missed the display:inline-block property, which someone in comments reminded me of
Above fix won't work, Making margin-bottom: 0 for the label will work though
a js fiddle:

* {
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.container {
  width: 80%;
  margin: auto;
}

aside#sidebar-wrapper {
  padding: 5px;
  width: 300px;
  border: 2px black solid;
}

aside#sidebar-wrapper input {
  width: 100%;
}


.lable {
  margin-bottom: 0px;
}

<div class="container">
  <aside id="sidebar-wrapper">
    <h1>Get A Quote</h1>
    <form action="" class="form-sidebar-wrapper">
      <div class="sidebar-input-wrapper">
        <label class="lable">Name</label>
        <input type="text" placeholder="Name" class="nameINput">
      </div>
      <div class="sidebar-input-wrapper">
        <label class="lable">Email</label>
        <input type="email" placeholder="Enter Email">
      </div>
      <button type="submit" class="button_1">Send</button>
    </form>
  </aside>
</div>