ルールで2つのhtml要素を水平に置く

Question

ボタンを並べてテキストボックスを配置したい。 しかし、次のルールで：

1）テキストボックスが画面のすべての自由幅スペース（leftpanel divの）

2）ボタンを満たさなければならないが、幅と高さを固定していると、常にブラウザの右端に固執する必要があります。 （rightpanel 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

は2つの方法があります。レイアウトを実現するには

まず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>