Responsive input field and submit button using display:table-cell - html

Question

I am trying to have the input field and the submit button stretch across the screen in the same row. Basically so the submit button does not ever go below the input field. Not even sure if I need to add an extra or not. I know that I have seen a way to have a responsive input field and submit button using display:table-cell, but I have not been able to find it lately. Any help would be appreciated.
**EDIT
I added: margin-left: -8px; to the submit button and that did the trick. Not sure if there is a better way but this works. Any other ways would be appreciated as well.
#div1{
display:table;
width:100%;
}
#div2{
display:table-cell;
}
input[type="email"].form-control {
width: 80%;
padding: 0px;
margin: 0px;
}
input[type="submit"].btn.btn-primary {
width: 20%;
padding: 0px;
margin: 0px;
margin-left: -8px;
}
<div id="div1">
<div id="div2">
<input type="email" name="EMAIL" class="form-control"
placeholder="Enter your E-mail Address">
<input type="submit" value="Subscribe" class="btn btn-primary">
</div>
</div>

Answer 1

Are you Trying to achieve something like this using display:table-cell ?
<div id="div2">
<input type="email" name="EMAIL" class="form-control"
placeholder="Enter your E-mail Address">
<input type="submit" value="Subscribe" class="btn btn-primary">
* {
box-sizing: border-box;
}
#div2 {
display: table;
width: 100%;
}
#div2 > * {
display: table-cell;
}
#div2 > input[type='email'] {
width: 80%;
}
#div2 > input[type='submit'] {
width: 20%;
}
the key is box-sizing: border-box; you can write it just for your desired elements
https://jsfiddle.net/uw4u6ta5/3/

Answer 2

The line feed between the two s creates a space between them on the page. You have to remove the line feed, or use this trick :
<input type="email" name="EMAIL" class="form-control" placeholder="Enter your E-mail Address"><!--
--><input type="submit" value="Subscribe" class="btn btn-primary">
Also you have to remove border because it has 2px border so it's width is 20%+80%+ 2px+2px+2px+2px(left and right for two inputs)
use
border:0;
check this updates jsfiddle please
Check this post remove spaces between inputs

Answer 3

You really don't need two divs wrapping your inputs for this. You need to set the div to white-space: nowrap; to keep your inputs on one line. Simply set your inputs to width: 50%; or you may choose any other combination targeting each input specifically.
#div2 {
display: block;
margin: 0 auto;
width: 100%;
white-space: nowrap;
}
input {
display: inline-block;
width: 50%;
}
If you want the input to be 80% and the button to be 20% you need to target them individually with your classes.
.form-control {
display: inline-block;
width: 80%;
margin: 0;
padding: 0;
}
.btn-primary {
width: 20%;
margin: 0 auto;
padding: 0;
}
(JSFiddle) Updated