title: How can I get my input text to move to the left up against the preceding label?
body: <p>I'm using bootstrap classes to arrange my page, and it was going fine until my latest row:</p>
  
  <pre><code>@* row 7: Copy, Excel, CSV, and PDF buttons  *@
  &lt;div class="row"&gt;
      &lt;div class="col-md-1"&gt;
      &lt;/div&gt;
      &lt;div class="col-md-8"&gt;
          &lt;button type="button" class="squishedbutton"&gt;Copy&lt;/button&gt;
          &lt;button type="button" class="squishedbutton"&gt;Excel&lt;/button&gt;
          &lt;button type="button" class="squishedbutton"&gt;CSV&lt;/button&gt;
          &lt;button type="button" class="squishedbutton"&gt;PDF&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col-md-1"&gt;
          &lt;label style="text-align: right;"&gt;Search:&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col-md-1"&gt;
          &lt;input type="text" style="margin-right: 2cm;" name="searchinput"&gt;
      &lt;/div&gt;
      &lt;div class="col-md-1"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That row is preceded and followed by rows like this:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;hr /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need the input text to shift to the left, away from the right border, and closer to the "Search" label.</p>
  
  <p>How can I accomplish this?</p>
  
  <p>I also don't know why the row is so tall, making the buttons overly tall - or why the buttons are so tall, making the row tall...</p>
  
  <p>The css used is:</p>
  
  <pre><code>.squishedbutton {
    border: none;
    margin-left: 0cm;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
  }
  </code></pre>
  
  <h2>UPDATE</h2>
  
  <p>This is how it looks now:</p>
  
  <p><a href="https://i.stack.imgur.com/Bg8AL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bg8AL.png" alt="enter image description here"></a></p>
  
  <p>...with this html:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-1"&gt;
      &lt;/div&gt;
      &lt;div class="col-md-7"&gt;
          &lt;button type="button" class="squishedbutton"&gt;Copy&lt;/button&gt;
          &lt;button type="button" class="squishedbutton"&gt;Excel&lt;/button&gt;
          &lt;button type="button" class="squishedbutton"&gt;CSV&lt;/button&gt;
          &lt;button type="button" class="squishedbutton"&gt;PDF&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col-md-1"&gt;
          &lt;label style="text-align: right; display: inline-block;"&gt;Search:&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col-md-1"&gt;
          &lt;input type="text" style="margin-right: 2cm;" name="searchinput"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...and this css:</p>
  
  <pre><code>.squishedbutton {
    margin-left: 0cm;
    margin-right: -0.1cm;
    padding: 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
  }
  </code></pre>
  
  <p>IOW, it looks more-or-less "okay" but I would like the input text shifted to the left and/or the label shifted to the right so that they appear a little more "cozy"</p>