The second text in <span> goes to another line - html

Question

How do I display "Confirm Password" in a single line ?
I add an <span id="confirm">Confirm Password</span> and I did this, doesn't work:
#confirm {
display: inline;
}
* {
margin: 0px;
padding: 0px;
}
body {
background-color: Royalblue; /*#f0f0f0;*/
}
.head {
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
background: rgba(0, 250, 0, 0);
color: #FFFACD;
font-family: 'Cinzel', sans-serif;
font-size:30px;
}
.content {
position:relative;
top:8px;
width: 30%;
margin: 50px
auto 0px;
}
form {
position: relative;
margin-top: 0;
margin-left: 0;
width: 89%;
height: 300px;
padding: 20px;
border: 1px solid #B0C4DE;
background: rgba(0, 250, 0, 0);
border-radius: 0px 0px 10px 10px;
}
label {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
left: -65%;
top: -30px;
}
.username {
position: relative;
top: 65px;
}
.password {
position: relative;
top: 130px;
}
.con-pass {
position: relative;
top: 195px;
}
#confirm {
display: inline;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
border: 0;
border-bottom: 2px solid beige;
background: transparent;
font-size: 15px; /*BORDER yes/no*/
height: 25px;
width: 250px;
outline: 0;
z-index: 1;
left: -74px;
top: -30px;
}
span {
position: absolute;
top: 5px;
left: -6px;
transition: top .5s ease, font-size .5s ease;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
/* padding-bottom: 15px;*/
}
label::after {
content: '';
position: absolute;
top: 27px; /* ::after position */
left: -7px;
width: 250px;
height: 23px;
border-radius: 2px;
transition: transform .3s;
}
label::after {
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: top;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1.3, 1);
transition-timing-function: linear;
top: 27px; /* ::after position */
}
input:focus {
border-radius: 2px;
}
<div class="content">
<p class="head">Register</p>
<form>
<div class="content">
<div class="email">
<input type="text" id="email" required /> <!--input field-->
<label for="email"><span>Email</span></label>
</div>
<div class="username">
<input type="text" id="user" required />
<label for="user"><span>Username</span></label>
</div>
<div class="password">
<input type="text" id="pass" required /> <!--input field-->
<label for="pass"><span>Password</span></label>
</div>
<div class="con-pass">
<input type="text" id="c-pass" required />
<label for="c-pass"><span id="confirm">Confirm Password</span></label>
</div>
</div>
</form>
</div>

Answer 1

You can use white-space: nowrap; for that :
#confirm {
white-space: nowrap;
}
Here is a resource for the white-space property in CSS.

Answer 2

Use white-space: nowrap; for class con-pass

Answer 3

You can also insert a in your html. That will ensure the two Words are kept on the same line:
<label for="c-pass"><span id="confirm">Confirm Password</span></label>