Make name appear on the same line nicely - html

Question

I am trying to place the firstname and the lastname on the same line.
I looked over this question:
html form - make inputs appear on the same line
But because of my old css (used in app), the fields aren't correctly displayed. I need a little space between the two fields.
I made a fiddle:
https://jsfiddle.net/up5bL2xn/
EDIT: My html code:
<div class="parent-split-row">
<div class="child-split-row">
<label class="form-label">
First Name
</label>
<input type="text"
id="js-input-first-name"
name="first_name"
class="form-input"
value="{{ form.first_name.vars.value|default }}"
placeholder="First Name"
onkeyup="VALIDATIONS.onKeyUp('js-coach-license-registration-form','js-input-first-name')"
onmouseup="VALIDATIONS.onMouseUp('js-coach-license-registration-form','js-input-first-name')"
autofocus>
<div id="js-input-first-name__error"
class="form-validation">
Please fill in your First Name
</div>
</div>
<div class="child-split-row">
<label class="form-label">
Last Name
</label>
<input type="text"
id="js-input-last-name"
name="last_name"
class="form-input"
value="{{ form.last_name.vars.value|default }}"
placeholder="Last Name"
onkeyup="VALIDATIONS.onKeyUp('js-coach-license-registration-form','js-input-last-name')"
onmouseup="VALIDATIONS.onMouseUp('js-coach-license-registration-form','js-input-last-name')"
autofocus>
<div id="js-input-last-name__error"
class="form-validation">
Please fill in your Last Name
</div>
</div>
</div>
Your help would be appreciated.
Thank you.

Answer 1

Here you go! just added a padding-right on the first name and divided the label and input in two different div's :)
.name{
float: left;
padding-right: 4%;
}
<div class="name">
<label for="First_Name">First Name:</label>
<input name="first_name" id="First_Name" type="text" />
</div>
<div class="lastname">
<label for="Name">Last Name:</label>
<input name="last_name" id="Last_Name" type="text" />
</div>

Answer 2

try this. ;)
.parent-split-row { display: flex; }

Answer 3

use "&nbsp" after your first div class="child-split-row" or else add padding right to your css for child-split-row class
.child-split-row {
padding-right:10px;
}
.parent-split-row {
display: table;
}
.child-split-row {
display: table-cell;
}
.form-label {
display: block;
width: 100%;
color: #1f1f1f;
margin-top: 7px;
margin-bottom: 10px;
padding-left: 2px;
}
.form-input {
font-family: Aileron;
font-weight: 500;
display: block;
width: 100%;
padding: 8px 10px;
color: #1f1f1f;
background-color: #d6d5d6;
border: 1px solid #d6d5d6;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
height: 34px;
}
<div class="parent-split-row">
<div class="child-split-row">
<label class="form-label">
First Name
</label>
<input type="text"
id="js-input-first-name"
name="first_name"
class="form-input"
placeholder="First Name">
</div>&nbsp&nbsp
<div class="child-split-row">
<label class="form-label">
Last Name
</label>
<input type="text"
id="js-input-last-name"
name="last_name"
class="form-input"
placeholder="Last Name">
</div>
</div>

Answer 4

Add this to your CSS file:
.child-split-row:not(:last-child) {
padding-right: 10px;
}
That's one way of doing it.