Q:

Align label on left and right on top of centered text-input

I would like to have the labels aligned one on the left and one on the right of two centered text-inputs that have each 40% width.
Here is how it looks now: https://jsfiddle.net/bcb4yu5h/2/
CSS:
input[type=text] {
    width: 40%;
    padding: 12px 20px;
    margin: 8px 3px;
    box-sizing: border-box;
}

input[type=text]:focus {
    outline: none;
}

HTML:
<div style="text-align: center">
    <label style="float: left" for="fname" >First Name</label>
    <span>
        <label style="float: right" for="sname" >Second Name</label>
    </span>
    <br>
    <input type="text" name="fname">
    <input type="text" name="sname">
</div>

A:

A quick solution is to assign margins on labels in %. (Because you know fixed % widths on left and right)

input[type=text] {
width: 40%;
padding: 12px 20px;
margin: 8px 3px;
box-sizing: border-box;
}
input[type=text]:focus {
outline: none;
}
<div style="text-align: center">
<label style="float: left; margin-left:10%" for="fname" >First Name</label><span>
<label style="float: right; margin-right:10%" for="sname" >Second Name</label></span><br>
<input type="text" name="fname">
<input type="text" name="sname">
</div>

Note: The slight displacement on left of first label and on right of second label is due to input[type=text] { margin: 8px 3px; }.

And an elegant solution using the magic of flex and re-usability of atomic classes would be:

    input[type=text] {
        padding: 12px 20px;
        margin: 4px 0;
        box-sizing: border-box;
        width: 100%;
    }

    input[type=text]:focus {
        outline: none;
    }

    .flex {
        display: flex;
    }

    .flex-space-evenly {
        justify-content: space-evenly;
    }

    .flex-align-end {
        align-items: flex-end;
    }

    .flex-direction-column {
        flex-direction: column;
    }
<div class="flex flex-space-evenly">
    <div style="width: 40%" class="flex flex-direction-column">
        <label for="fname">First Name</label>
        <input id="fname" type="text" name="fname">
    </div>

    <div style="width: 40%"  class="flex flex-direction-column flex-align-end">
        <label for="lname">Last Name</label>
        <input id="lname" type="text" name="fname">
    </div>
</div>

