Add span to side of center align element - html

Question

I'm trying to implement some designs in CSS, but having a bit of trouble figuring out how to align this <span> correctly.
I am trying to achieve the <input> and <button> elements being centrally aligned, but the <span> element being absolutely to the right of the <input>, example:
It's important to make sure that the <span> does not affect the alignment of the other elements. The <input> and <button> should always be exactly in the middle of the parent.
Would be great if I could do this in CSS only. This is what I have so far:
div {
position: relative;
text-align: center;
background: #B7B7B7;
width: 400px;
}
input {
padding: 5px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
width: auto;
}
.verify {
display: block;
width: 20px;
height: 20px;
background: red;
position: absolute;
top: 0; /* Not sure how to calculate these? */
right: 0; /* Input.X + Input.Width + 15px ?? */
}
<div>
<input placeholder="Enter code" maxlength="8" size="8"/><br />
<span class="verify"></span>
<button>Register</button>
</div>
Additional Info:
It only has to work in Chrome
I can make all elements a fixed width if required
I can make DOM changes if required
I would prefer not to hardcode X/Y co-ordinates for the <span>...I might want to change the input/button dimensions later

Answer 1

Wrap the input and the span inside a div with position: relative and display:inline
The span .verify will get absolutely positioned, leaving the input element to it's original position (centered aligned)
By giving a top:50% and then margin-top: -10px (half of its height), it will get in the middle of it's parent height.
.wrp {
position: relative;
text-align: center;
background: #B7B7B7;
width: 400px;
}
.inpWrp {
display: inline;
position:relative;
}
input {
padding: 5px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
width: auto;
}
.verify {
display: block;
width: 20px;
height: 20px;
background: red;
position: absolute;
margin-top: -10px;
top: 50%; /* Not sure how to calculate these? */
right: -20px; /* Input.X + Input.Width + 15px ?? */
}
<div class="wrp">
<div class="inpWrp">
<input placeholder="Enter code" maxlength="8" size="8"/>
<span class="verify"></span>
</div>
<br />
<button>Register</button>
</div>

Answer 2

You can wrap your input element in span and using pseudo-element :after to create the square. No need of position absolute:
div {
position: relative;
text-align: center;
background: #B7B7B7;
width: 400px;
}
input {
padding: 5px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
width: auto;
vertical-align: middle;
}
.verify:after {
content: "";
width: 20px;
height: 20px;
background: red;
display: inline-block;
vertical-align: middle;
}
<div>
<span class="verify">
<input placeholder="Enter code" maxlength="8" size="8"/>
</span>
<br />
<button>Register</button>
</div>
After #kapantzak comment you can use position absolute like:
div {
position: relative;
text-align: center;
background: #B7B7B7;
width: 400px;
}
input {
padding: 5px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
width: auto;
}
.verify:after {
content: "";
width: 20px;
height: 20px;
background: red;
display: inline-block;
position: absolute;
top: 17px;
}
<div>
<span class="verify">
<input placeholder="Enter code" maxlength="8" size="8"/>
</span>
<br />
<button>Register</button>
</div>

Answer 3

Try this...
.main_container {
position: relative;
text-align: center;
background: #B7B7B7;
width: 400px;
}
input {
padding: 5px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
width: auto;
}
.verify {
display: inline-block;
width: 20px;
height: 20px;
background: red;
position: relative;
top: 2px;
left: 10px;
}
<div class="main_container">
<div><input placeholder="Enter code" maxlength="8" size="8"/>
<span class="verify"></span></div>
<button>Register</button>
</div>