Place the button next to the full width of the TextBox 100%

Question

Is it possible to put a button next to a TextBox when the Button has a given width (its value) and the parent div also has a given width. As a result, the width of the TextBox width + Button should be the width of the parent div.

TestExample:

#left
{
    float: left;
    width: 100%;
}
#right 
{
    width: auto;
}

<div>
    <input type="text" id="left"/>
    <input type="button" id="right" value="AnyText"/>
</div>

Run codeHide result

Thank!

Answer 1

form { display: flex; }
input[type=text] { flex-grow: 1; }

<form>
  <input type="text">
  <input type="button" value="Button text">
</form>

Run codeHide result

Answer 2

The table also had my thoughts .. maybe this will do what you hope?

#right {
  width: 100%;
}
#left {
  width: 100%;
}
table {
  margin: 0 auto;
  padding: 0;
}

<table width="100%">
  <tr>
    <td>
      <input type="text" id="left" />
    </td>
    <td>
      <input type="button" id="right" value="AnyText" />
    </td>
  </tr>
</table>

Run codeHide result

Answer 3

width parrent, 100%. , CSS, , ,

div {
    width: 300px; }
#left {
    float: left;
    width: 100%; }
#right  {
    width: 100%; }

Answer 4

. .

.left {
    position: absolute;
    top: 10; right: 100px; left:5px; 
}
.right {
    float: right
}
.input-group {
    display: table;
position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
    display: inline-table;
    vertical-align: middle;
}
.input-group-btn{
    display: table-cell;
    width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.form-control{
    display: table-cell;
    width: 100%;
}


<div class="input-group">
      <input type="text" class="form-control" />
      <span class="input-group-btn">
        <input type="button" value="AnyText"/>
      </span>
    </div>

jsfiddle