Put a button inside the text box
<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>