按规则水平放置两个html元素

Question

我想把带有按钮的文本框并排放置。 但是有了下一个规则：

1）TextBox必须填充屏幕的所有自由宽度空间（leftpanel div）

2）按钮具有固定的宽度和高度，必须始终粘在浏览器的右边缘。 （右面板div）

我的CSS风格：

<style type="text/css">
    div.centerpanel {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .leftpanel {
        background: red;
        display: inline-block;
        width: 90%;
        float: left
    }

    .rightpanel {
        background: blue;
        display: inline-block;
        width: 10%;
        float: left
    }
</style>

全屏效果很好。但是，如果我通过拖动边缘/角落按钮部分修剪来立即制作浏览器窗口。

样本（接近全屏）：

示例（拖动小屏幕后）：

我想要的是什么：

Answer 1

有两种方法可以实现您的布局，

首先flexbox

.flexwrap {
  display: flex;
  width: 100%:
}

.flexwrap input {
  flex: 1 1;
  margin-right:10px;
}

<div class=flexwrap>
  <input>
  <button>+</button>
</div>

秒table

.tablewrap {
  display: table;
  width: 100%;
}
.tablewrap .t-cell {
  display: table-cell;
}
.tablewrap .t-cell input {
  width: 100%;
}
.tablewrap .t-cell:first-child{
  padding-right:20px;
}
.tablewrap .t-cell:last-child {
  width:20px;
}

<div class=tablewrap>
  <span class=t-cell>
    <input>
  </span>
  <span class=t-cell>
    <button>+</button>
  </span>
</div>