Footer content cannot get margin in new line - html

Question

I've created a simple footer content that have this structure:
<div id="footer">
<div id="footer-content">
<p>System developed by a developer</p> |
<span id="select-language" class="label label-info">
english
</span>
</div>
</div>
Now I've applied this css:
#footer
{
background-color: #3A3A3A;
border-top: 1px solid #337ab7;
font-size: 13px;
overflow: auto;
color: #FFFFFF;
position: absolute;
bottom: 0;
width: 100%;
}
#footer *
{
padding: 10px 15px;
display: inline-block;
}
Essentially what I did is stick the footer at the bottom of the page, and I tried to get the content of the footer in one line. This working nice, but when I resize the page, the footer content is disposed in a new line (if there is no space enough for the other item in the footer), the problem's that the new line does not get the left margin that I've set 15px what I can do for this?
Example:
I put a jsfiddle here.
Note that I'm also using Bootstrap. Thanks.

Answer 1

The | is not in any element, its plain text. That way the * in your CSS doesn't catch it.
Old and new example next to eachother:
The only difference is the div surrounding the |.
#footer
{
background-color: #3A3A3A;
border-top: 1px solid #337ab7;
font-size: 13px;
overflow: auto;
color: #FFFFFF;
position: absolute;
bottom: 0;
width: 200px;
}
#footer *
{
padding: 10px 15px;
display: inline-block;
}
#footer2
{
background-color: #3A3A3A;
border-top: 1px solid #337ab7;
font-size: 13px;
overflow: auto;
color: #FFFFFF;
position: absolute;
bottom: 0;
left: 300px;
width: 200px;
}
#footer2 *
{
padding: 10px 15px;
display: inline-block;
}
<div id="footer">
<div id="footer-content">
<p>System developed by a developer</p> |
<span id="select-language" class="label label-info">
english
</span>
</div>
</div>
<div id="footer2">
<div id="footer-content">
<p>System developed by a developer</p>
<div>
| <!-- Over here -->
</div>
<span id="select-language" class="label label-info">
english
</span>
</div>
</div>

Answer 2

Are you trying to achieved something like this
#footer
{
background-color: #3A3A3A;
border-top: 1px solid #337ab7;
font-size: 13px;
overflow: auto;
color: #FFFFFF;
position: absolute;
bottom: 0;
width: 100%;
}
#footer *
{
padding: 10px 15px;
display: inline-block;
vertical-align: top;
}
span#select-language {
margin-left:10px;
}
#footer p{padding-top:0px}
#media only screen and (max-width:350px) {
#footer p{width:65%; padding-top: 0; float:left;}
span#select-language {
margin-left:10px;
}
#footer-content {
width: 100%;
}
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="footer">
<div id="footer-content">
<p>System developed by a developer</p> |
<span id="select-language" class="label label-info">
english
</span>
</div>
</div>