Input field and button side by side in center - css

Question

I have an input field and a button that I want to have horizontally and vertically centered (without transform) side by side in the middle. I can easily fix the centering part, but to place the input field and the button side by side has proven to be much harder. For whatever reason, the button is placed lower than the input field.
The HTML and CSS:
body {
background: #000;
text-align: center;
}
.hd {
font-size: 3.9rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
color: rgb(250, 250, 250);
margin-bottom: 30px;
}
.content {
margin: 0;
position: relative;
margin-top: 20vh;
}
.form-control, .btn {
display: inline-block;
padding: 10px 25px;
font-size: 1rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
border-radius: 0;
-webkit-appearance: none;
}
.form-group {
display: inline-block;
}
.form-control {
border: 0;
float: left;
width: 250px;
}
*:focus {
outline: none;
}
.form-controlt:focus{
outline: none;
}
.btn {
background-color: lightgreen;
border: 0;
background-color: #ff8e41;
-o-transition: all .3s;
transition: all .3s;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
font-style: normal;
font-weight: 600;
position: relative;
border: 0;
box-sizing: border-box;
color: #fff;
text-align: center;
margin: 0 auto;
-webkit-appearance: button;
cursor: pointer;
}
.btn::-moz-focus-inner {
border: 0;
}
.btn[type=submit]:active {
background: #ed7a18;
box-shadow: 0 1px 0 0 hsla(0,0%,100%,.27),inset 0 1px 0 0 #bc5f10;
}
.btn[type=submit]:hover {
background-color: #ffa353;
-o-transition: all .3s;
transition: all .3s;
}
<div class="content">
<div class="hd">Text</div>
<form action="8dy9s8hsd9.php" method="POST">
<div id="name-group" class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
</form>
</div>

Answer 1

Put the input and the button elements inside the same div with .form-group class.
body {
background: #000;
text-align: center;
}
.hd {
font-size: 3.9rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
color: rgb(250, 250, 250);
margin-bottom: 30px;
}
.content {
margin: 0;
position: relative;
margin-top: 20vh;
}
.form-control, .btn {
display: inline-block;
padding: 10px 25px;
font-size: 1rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
border-radius: 0;
-webkit-appearance: none;
}
.form-group {
display: inline-block;
}
.form-control {
border: 0;
float: left;
width: 250px;
}
*:focus {
outline: none;
}
.form-controlt:focus{
outline: none;
}
.btn {
background-color: lightgreen;
border: 0;
background-color: #ff8e41;
-o-transition: all .3s;
transition: all .3s;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
font-style: normal;
font-weight: 600;
position: relative;
border: 0;
box-sizing: border-box;
color: #fff;
text-align: center;
margin: 0 auto;
-webkit-appearance: button;
cursor: pointer;
}
.btn::-moz-focus-inner {
border: 0;
}
.btn[type=submit]:active {
background: #ed7a18;
box-shadow: 0 1px 0 0 hsla(0,0%,100%,.27),inset 0 1px 0 0 #bc5f10;
}
.btn[type=submit]:hover {
background-color: #ffa353;
-o-transition: all .3s;
transition: all .3s;
}
<div class="content">
<div class="hd">Text</div>
<form action="8dy9s8hsd9.php" method="POST">
<div id="name-group" class="form-group">
<input type="text" class="form-control">
<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
</div>
</form>
</div>

Answer 2

Change:
<div id="name-group" class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
To:
<div id="name-group" class="form-group">
<input type="text" class="form-control">
<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
</div>
body {
background: #000;
text-align: center;
}
.hd {
font-size: 3.9rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
color: rgb(250, 250, 250);
margin-bottom: 30px;
}
.content {
margin: 0;
position: relative;
margin-top: 20vh;
}
.form-control, .btn {
display: inline-block;
padding: 10px 25px;
font-size: 1rem;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
border-radius: 0;
-webkit-appearance: none;
}
.form-group {
display: inline-block;
}
.form-control {
border: 0;
float: left;
width: 250px;
}
*:focus {
outline: none;
}
.form-controlt:focus{
outline: none;
}
.btn {
background-color: lightgreen;
border: 0;
background-color: #ff8e41;
-o-transition: all .3s;
transition: all .3s;
font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
font-style: normal;
font-weight: 600;
position: relative;
border: 0;
box-sizing: border-box;
color: #fff;
text-align: center;
margin: 0 auto;
-webkit-appearance: button;
cursor: pointer;
}
.btn::-moz-focus-inner {
border: 0;
}
.btn[type=submit]:active {
background: #ed7a18;
box-shadow: 0 1px 0 0 hsla(0,0%,100%,.27),inset 0 1px 0 0 #bc5f10;
}
.btn[type=submit]:hover {
background-color: #ffa353;
-o-transition: all .3s;
transition: all .3s;
}
<div class="content">
<div class="hd">Text</div>
<form action="8dy9s8hsd9.php" method="POST">
<div id="name-group" class="form-group">
<input type="text" class="form-control">
<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
</div>
</form>
</div>