title: Put a button inside the text box
body: <p>I'm trying to design a form, with a button inside a text-box. I want that button to be inside the text-box. This is how I tried:</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;
          &lt;div class=&quot;form-group required&quot;&gt;
              &lt;label for=&quot;PickList_Options&quot; class=&quot;col-sm-4 control-label&quot;&gt;Options&lt;/label&gt;
              &lt;div class=&quot;col-sm-4 buttonwrapper&quot;&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;PickList_Options&quot; name=&quot;PickList_Options&quot; value='' /&gt;
                  &lt;button&gt;GO&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;
          &lt;div class=&quot;result&quot; id=&quot;mydiv&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>my css:</p>
  <pre><code>.buttonwrapper {
      display:inline-block;
  }
  
  input,
  button {
      background-color:transparent;
      border:0;
  }
  </code></pre>
  <p>But, the problem is, the Go button is placed below the text-box. What should I do to place it inside the text-box?</p>
  <p><a href="https://i.stack.imgur.com/xFeCu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xFeCu.png" alt="Simple Image" /></a></p>
  <p>I want that &quot;Go&quot; button to be inside the text-box.</p>