CSS, two columns - left with dynamic width (input), right with fixed (button) - html

Question

can somebody please point me to a solution for this?
HTML
<div class="container">
<input type="text" class="left" />
<button class="right">Some button</button>
</div>
CSS
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right { width: 100px; }
Here is code pen sample: http://codepen.io/be-codified/pen/qdRRBY
Input field should be stretchable, button should be fixed positioned on right.
Thank you in advance.
// edit
I can not use table tag because layout needs to be responsive.

Answer 1

I gave the input a width of calc(100% - 110px) and the button a float:right which resulted in the following. Is that what you need? The input type you want to use is, as far as I know, not stretchable by the user.
CSS
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right {
width: 100px;
float: right;
}
input.left {
width: calc(100% - 110px); //This makes sure the input area is as wide as possible, while also leaving space for the button. Play with the exact measurements to get what you need.
}

Answer 2

I suggest you to put the form elements into <div>, so don't change their default display properties, and then set the left input box to 100% width as needed.
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right {
width: 100px;
}
.left input {
width: 100%;
box-sizing: border-box;
}
<div class="container">
<div class="left"><input type="text" /></div>
<div class="right"><button>Some button</button></div>
</div>
In fact, both left and right can have dynamic width, so right column always get the minimum width based on the button length.
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
white-space: nowrap;
}
.left {
width: 100%;
}
.left input {
width: 100%;
box-sizing: border-box;
}
<div class="container">
<div class="left"><input type="text" /></div>
<div class="right"><button>Some button</button></div>
</div>

Answer 3

Here is full responsive solution.
HTML
<div class="container">
<div class="input-flied-box">
<form>
<input type="text" required="required" placeholder="Right Some thing" />
<button type="submit" class="submit-button">Send</button>
</form>
</div>
</div>
CSS
/* RESPONSIVE CSS */
.container{
width: 100%;
}
.input-flied-box{
width: 100%;
}
.input-flied-box input{
padding: 6px 12px 6px 12px;
}
.submit-button{
top: inherit;
right: inherit;
position: relative;
margin-bottom: 15px;
}
#media (min-width: 768px){
.container{
width: 750px;
}
.input-flied-box{
width: 600px;
}
.input-flied-box input{
padding: 6px 101px 6px 12px;
}
.submit-button{
top: 14px;
right: 14px;
position: absolute;
margin-bottom: 0;
}
}
#media (min-width: 992px){
.container{
width: 960px;
}
}
#media (min-width: 1200px){
.container{
width: 1170px;
}
}
/* RESPONSIVE CSS END */
*:after,
*:before{
box-sizing: border-box;
}
*{
box-sizing: border-box;
}
.container:after,
.container:before{
display: table;
content: " ";
clear: both;
}
.container{
margin-left: auto;
margin-right: auto;
}
.input-flied-box {
background-color: #666666;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.input-flied-box input {
background-color: #ffffff;
border: 1px solid #cccccc;
height: 40px;
margin-bottom: 15px;
margin-top: 15px;
width: 100%;
border-radius: 4px;
}
.submit-button {
background-color: #fc3850;
border: medium none;
border-radius: 4px;
color: #ffffff;
font-family: Arial;
line-height: 1;
padding: 13px 30px;
text-transform: uppercase;
}
https://jsfiddle.net/bL3wgrv9/