Stopping a div from splitting its contents when screen becomes too small? - css

Question

I have the following html on a window, when the window becomes too small it splits the input and icon on a new line. I would like them to always be together. Any ideas ?
<div>
<input type="text" class="email-address"
value="long-long-long-user#test-test-test.com">
<i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</div>
This is a the css
.email-address {
width: 300px;
}
Is there any way to ensure that they don't split up?
The div is simple place inside the body, and as you make the window smaller in width, (less than 300px) then the icon jumps to the line underneath.

Answer 1

By simply use width/max-width you can do like this
Fiddle demo
.email-address {
width: calc(100% - 40px); /* 40px, the icon width + padding */
max-width: 300px;
}
.email-address + i {
padding-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<input type="text" class="email-address" value="long-long-long-user#test-test-test.com">
<i class="fa fa-clipboard fa-1x" aria-hidden="true"></i>
</div>
Another option would be display: flex.
Fiddle demo
Stack snippet
div {
display: flex;
}
.email-address {
width: 300px;
min-width: 0;
}
.email-address + i {
padding-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<input type="text" class="email-address" value="long-long-long-user#test-test-test.com">
<i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</div>

Answer 2

Try adding a class to the parent container:
<div class='parent'>
<input type="text" class="email-address" value="long-value">
<i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</div>
Then add the following CSS:
.parent{
whitespace: nowrap;
}

Answer 3

Wrap your elements into a <span class="input-icon">
<div>
<span class="input-icon">
<input type="text" class="email-address" value="bla">
<i class="fa fa-clipboard fa-2x" aria-hidden="true"></i>
</span>
</div>
And than this CSS:
.input-icon{
white-space: nowrap;
}