How to Show submit button inside text field

Question

I have a comment form where I want to show submit button inside the text field on the right side. Here is what I've done till now:

.flex1 {
  display: flex;
}
.flex2 {
  flex: 1;
}

<form class="comment-form" method="get">
  <img src="image" alt="">
  <p class="flex1"><input type="text" class="form-control flex2" placeholder="Leave a comment..."> <button type="submit" class="btn btn-info">comment</button></p>
</form>

Using this method the form go out of screen. Is there a better way to put submit button inside text field. Hint: I'm using Bootstrap.

Solution 1

Assuming you are not forced to use flexbox, here's a codepen I made achieving what you want.

http://codepen.io/habovh/pen/rLxJdM

Basically, wrap your input and button in a fixed-width relative container, and place the button using position: absolute on the right.

Solution 2

Just add style to your button;

<button type="submit" class="btn btn-info" style="position: absolute;right: 0;margin-top: -34px;">comment</button>