Reply To: Styling the login widget
.css-class-of-username-input, .css-class-of-password-input {
float: left;
width: 50%;
}
If the inputs have containers then you can also apply padding-right and padding-left to the first and last child.
.username-container {
padding-right: 10px;
}
.password-container {
padding-left: 10px;
}
To add a label as a placeholder wont work, a placeholder should be a hint about what to do with the form field, the label should be used to describe it in part. Additional info about the field can be supplied after the input in a paragraph.
There are some nice examples of animated label elements which could achieve what you are trying to do with css. It would be something like.
.input-container {
position: relative;
}
label {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
transition: .2s;
}
input:focus + label {
position: absolute;
top: 0;
left: 0;
}
Hope that helps.