Relative Label Positioning Within Flexbox Form

Question

I'm attempting to overlay labels atop input fields. The thing is, I'm using flex and it doesn't seem to work the same way.

I've looked for solutions on Google, but it seems most of what I can find has to do with aligning items via flex positioning, but I need my elements to align side-by-side after moving the label over. I've provided code, in case I'm making it hard to understand what I need.

I've looked for solutions here, as well, but I haven't found anything specific to my issue. Currently, I have the labels overlaying the fields, but I can't get the fields to align alongside one another. Also, I'm sure some of you will notice the fields drop below the labels in smaller screens.

So, to make sure I'm clarifying, which I'm not sure I am. I need my input fields to align side-by-side while the label overlaps the input. (whiteboard sketch: https://sketchboard.me/dADoYPlJsIfT#/)

/* ---- START RESET ---- */
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, 
input, select, textarea, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	box-sizing: border-box;
	font-weight: normal;
	font-style: normal;
	border: 0;
	outline: none;
	resize: unset;
	cursor: default; /* 2 */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	background-color: #eee;
	overflow-x: hidden;
}

html, html a {
	-webkit-font-smoothing: antialiased;
}

body {
	font-size: 1.6rem;
	font-family: OpenSansRegular, sans-seriff;
	color: #333;
	line-height: 1.25;
}

textarea {
	-moz-padding-end: 0px;
	-moz-padding-start: 0px;
}

input, 
textarea, 
select, 
button, 
label { 
	font-family: inherit; 
	font-size: inherit; 
	line-height:inherit;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner, 
[type="reset"]::-moz-focus-inner, 
[type="menu"]::-moz-focus-inner {
	border: 0;
	padding: 0;
	margin: 0;
}
/* ---- END RESET ---- */

input, 
textarea, 
select, 
button, 
label,
span { 
	box-sizing: border-box;
	order: 0;
	align-self: center;
	border: 0px solid #333;
}

form {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-between;
	align-items: center;
	width: 80%;
	margin: auto;
	padding: 5rem;
  border: 1px solid #333;
}

input, 
textarea, 
select, 
button, 
label { 
	display: inline-block;
	flex: 0 0 50%;
  border: 1px solid #333;
}

label {
	z-index: 1;
  border: 0px solid #333;
}

input, 
textarea, 
select,
button, 
label { 
	position: relative;
	padding: .8rem;
}

input[type=text], 
input[type=email], 
input[type=url], 
input[type=tel], 
input[type=number], 
input[type=date], 
select, 
textarea {
	vertical-align: top;
	top: 0;
	left: -50%;
}





::placeholder {
	color: rgba(51, 51, 51, 0);
}

::-webkit-input-placeholder { /* WebKit browsers */
	color: rgba(51, 51, 51, 0);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: rgba(51, 51, 51, 0);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: rgba(51, 51, 51, 0);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: rgba(51, 51, 51, 0);
}

textarea::-webkit-input-placeholder { /* WebKit browsers */
	color: rgba(51, 51, 51, 0);
}
textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: rgba(51, 51, 51, 0);
}
textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: rgba(51, 51, 51, 0);
}
textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: rgba(51, 51, 51, 0);
}

<h3>Form Name</h3>

<form class="form-horizontal">
		<!-- Text Input-->
		<label for="firstName">First Name</label> 
		<input type="text" id="firstName" name="firstName" placeholder="" /> 
		
    <!-- Text Input-->
		<label for="lastName">Last Name</label> 
		<input type="text" id="lastName" name="lastName" placeholder="" />
</form>

Answer 1

I just added a negative -50% right margin to the inputs: (test it on full screen mode)

/* ---- START RESET ---- */
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, 
input, select, textarea, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	box-sizing: border-box;
	font-weight: normal;
	font-style: normal;
	border: 0;
	outline: none;
	resize: unset;
	cursor: default; /* 2 */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	background-color: #eee;
	overflow-x: hidden;
}

html, html a {
	-webkit-font-smoothing: antialiased;
}

body {
	font-size: 1.6rem;
	font-family: OpenSansRegular, sans-seriff;
	color: #333;
	line-height: 1.25;
}

textarea {
	-moz-padding-end: 0px;
	-moz-padding-start: 0px;
}

input, 
textarea, 
select, 
button, 
label { 
	font-family: inherit; 
	font-size: inherit; 
	line-height:inherit;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner, 
[type="reset"]::-moz-focus-inner, 
[type="menu"]::-moz-focus-inner {
	border: 0;
	padding: 0;
	margin: 0;
}
/* ---- END RESET ---- */

input, 
textarea, 
select, 
button, 
label,
span { 
	box-sizing: border-box;
	order: 0;
	align-self: center;
	border: 0px solid #333;
}

form {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-between;
	align-items: center;
	width: 80%;
	margin: auto;
	padding: 5rem;
  border: 1px solid #333;
}

input, 
textarea, 
select, 
button, 
label { 
	display: inline-block;
	flex: 0 0 50%;
  border: 1px solid #333;
}

label {
	z-index: 1;
  border: 0px solid #333;
}

input, 
textarea, 
select,
button, 
label { 
	position: relative;
	padding: .8rem;
}

input[type=text], 
input[type=email], 
input[type=url], 
input[type=tel], 
input[type=number], 
input[type=date], 
select, 
textarea {
	vertical-align: top;
	top: 0;
	left: -50%;
  margin-right: -50%;
}





::placeholder {
	color: rgba(51, 51, 51, 0);
}

::-webkit-input-placeholder { /* WebKit browsers */
	color: rgba(51, 51, 51, 0);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: rgba(51, 51, 51, 0);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: rgba(51, 51, 51, 0);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: rgba(51, 51, 51, 0);
}

textarea::-webkit-input-placeholder { /* WebKit browsers */
	color: rgba(51, 51, 51, 0);
}
textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: rgba(51, 51, 51, 0);
}
textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: rgba(51, 51, 51, 0);
}
textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: rgba(51, 51, 51, 0);
}

<h3>Form Name</h3>

<form class="form-horizontal">
		<!-- Text Input-->
		<label for="firstName">First Name</label> 
		<input type="text" id="firstName" name="firstName" placeholder="" /> 
		
    <!-- Text Input-->
		<label for="lastName">Last Name</label> 
		<input type="text" id="lastName" name="lastName" placeholder="" />
</form>

Answer 2

The reason they are on two separate lines is because, you're using relative positioning for labels. Relative positioning does move the labels, but they still take up the space they would have taken if you had not moved them. You need to use absolute positioning.

You seem to have set position relative to almost everything. You need to absolutely position the label to the field. I would suggest surround the input and label in a div with a position of relative and then position the label with absolute positioning.

form {
  display: flex
}

.form-field {
  position: relative
}

label {
  position: absolute;
  margin-left: 5px;
  top: 50%;
  transform: translate(0%, -50%)
}

<form>
  <div class="form-field">
    <label>Label1</label>
    <input type="text" />
  </div>
  <div class="form-field">
    <label>Label1</label>
    <input type="text" />
  </div>
</form>