inline field are merged when adjusting label - html

Question

I am trying to create a responsive form using flex where the first name and last name will be in same column in large devices and be in separate column in small devices. I designed the form and it was working as expected(not the responsive part though)until I adjust the label in the input box. I used the position: absolute to adjust the label, so it break the design of first name and last name field. They got merge now.
Here is the demo
http://jsbin.com/pecijupicu/3/edit?html,css
Meanwhile, here is the source code
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
background: #f2f3f78a;
-webkit-font-smoothing: antialiased;
}
aside.form-container {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px 0 #f0efef;
margin: 0 40px;
border-radius: 6px;
}
.form-container h3 {
color: rgb(67, 77, 90);
}
form {
min-width: 400px;
width: 600px;
justify-content: center;
display: flex;
flex-direction: column;
margin: 0 auto;
}
form .field {
margin: 15px 0;
/* flex-direction: column; */
display: flex;
position: relative;
}
.form-input {
flex: 1;
}
label {
position: absolute;
top: 4px;
}
form .field label {
margin: 10px 0;
color: rgb(67, 77, 90);
}
button.next {
padding: 10px 0;
width: 100px;
background: rgb(0, 213, 229);
border: none;
display: flex;
justify-content: center;
}
button.next:after {
content: "Next";
color: #fff;
}
input[type="text"],
textarea {
padding: 8px;
border: transparent;
border-bottom: solid 1px #999;
}
input[type="text"]:focus,
textarea:focus {
outline: none;
border-bottom: solid 1px rgb(0, 213, 229);
}
textarea {
width: 100%;
}
<aside class="form-container">
<h3>Personal</h3>
<form>
<div class="field">
<label>First Name</label>
<input type="text" name="name" class="form-input" />
<label>Last Name</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>Email</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>Country</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>City</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>Description</label>
<textarea></textarea>
</div>
<!-- show button to the bottom right corner -->
<button class="next"></button>
</form>
</aside>

Answer 1

I have made some changes to the html structure and added some extra styles to suit your use case. My solution supports responsiveness as well.
link to working example: JSbin
Here is the code:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
background: #f2f3f78a;
-webkit-font-smoothing: antialiased;
}
aside.form-container {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px 0 #f0efef;
margin: 0 40px;
border-radius: 6px;
}
.form-container h3{
color: rgb(67, 77, 90);
}
form {
width: 100%;
justify-content: center;
display: flex;
flex-direction: column;
margin: 0 auto;
}
form .field {
margin: 15px 0;
/* flex-direction: column; */
display: flex;
position: relative;
}
form .combined{
display: flex;
flex-direction: row;
}
.form-input {
flex: 1;
}
form .combined .field{
flex:1;
justify-content: space-between;
/* border: 1px solid red; */
}
form .combined .field .form-input{
margin-right: 20px;
}
label {
position: absolute;
top: 4px;
}
form .field label {
margin: 10px 0;
color: rgb(67, 77, 90);
}
button.next {
padding: 10px 0;
width: 100px;
background: rgb(0,213,229);
border: none;
display: flex;
justify-content: center;
}
button.next:after {
content: "Next";
color: #fff;
}
input[type="text"], textarea {
padding: 8px;
border: transparent;
border-bottom: solid 1px #999;
}
input[type="text"]:focus, textarea:focus {
outline: none;
border-bottom: solid 1px rgb(0,213,229);
}
textarea {
width: 100%;
}
#media screen and (max-width: 520px) {
form .combined{
display: flex;
flex-direction: column;
}
form .combined .field{
flex:1;
justify-content: space-between;
margin: 25px 0;
}
form .combined .field label{
position: absolute;
top: -11px;
}
form .combined .field .form-input{
margin-right: 0;
}
}
<aside class="form-container">
<h3>Personal</h3>
<form>
<div class="combined">
<div class="field">
<label>First Name</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="name" class="form-input" />
</div>
</div>
<div class="field">
<label>Email</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>Country</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>City</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>Description</label>
<textarea></textarea>
</div>
<!-- show button to the bottom right corner -->
<button class="next"></button>
</form>
</aside>

Answer 2

Add left: 50% to the lastname label - it makes sense as the absolutely positioned labels share the full-width 50-50 due flex: 1 given to them. See demo below:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
background: #f2f3f78a;
-webkit-font-smoothing: antialiased;
}
aside.form-container {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px 0 #f0efef;
margin: 0 40px;
border-radius: 6px;
}
.form-container h3 {
color: rgb(67, 77, 90);
}
form {
min-width: 400px;
width: 600px;
justify-content: center;
display: flex;
flex-direction: column;
margin: 0 auto;
}
form .field {
margin: 15px 0;
/* flex-direction: column; */
display: flex;
position: relative;
}
.form-input {
flex: 1;
}
label {
position: absolute;
top: 4px;
}
form .field label {
margin: 10px 0;
color: rgb(67, 77, 90);
}
form .field label:nth-of-type(2) {
left: 50%; /* ADDED */
}
button.next {
padding: 10px 0;
width: 100px;
background: rgb(0, 213, 229);
border: none;
display: flex;
justify-content: center;
}
button.next:after {
content: "Next";
color: #fff;
}
input[type="text"],
textarea {
padding: 8px;
border: transparent;
border-bottom: solid 1px #999;
}
input[type="text"]:focus,
textarea:focus {
outline: none;
border-bottom: solid 1px rgb(0, 213, 229);
}
textarea {
width: 100%;
}
<aside class="form-container">
<h3>Personal</h3>
<form>
<div class="field">
<label>First Name</label>
<input type="text" name="name" class="form-input" />
<label>Last Name</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>Email</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>Country</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>City</label>
<input type="text" name="name" class="form-input" />
</div>
<div class="field">
<label>Description</label>
<textarea></textarea>
</div>
<!-- show button to the bottom right corner -->
<button class="next"></button>
</form>
</aside>