How do i place my label over my text box input? - html

Question

I have the below code to make a login form but i cant get the checkbox label to be like always against the edge of the text area. I always sits to the right of the text area. I cant get it to be dependant on the div it is in. On inspection it sits outside the div.
Different things i have tried have included giving the label a left value but this messes it up when the screen size changes.
I want something like this
Here is a jsfiddle if this is easier
function showHidePassword() {
var x = document.getElementById("pass");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
body {
background-color: #ffffff;
}
* {
box-sizing: border-box;
}
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=password],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container1 {
border-radius: 25px;
background-color: #f2f2f2;
padding: 40px;
position: center;
margin: 15% 30%;
}
.signup {
border-radius: 25px;
background-color: #f2f2f2;
padding: 40px;
position: center;
opacity: 0.96;
}
.container1 .new-body {
background: #f2f2f2;
}
.signup .new-body {
background: #f2f2f2;
}
.signup .row {
padding-top: 5px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 65%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25,
.col-75,
input[type=submit] {
width: 100%;
margin-top: 0;
}
.col-70,
input[type=submit] {
width: 95%;
margin-top: 0;
}
}
.passw {
cursor: pointer;
width: 30px;
height: 20px;
}
.col-75 label {
padding-top: 16px;
position: absolute;
z-index: 100;
}
<form>
<div class="row">
<div class="col-25">
<label for="pass">Password</label>
</div>
<div class="col-75">
<input type="password" id="pass" name="password" minlength="5" pattern="[A-Za-z][A-Za-z0-9]*[0-9][A-Za-z0-9]*" placeholder="Password" title="A valid password is a set of 5 characters, each consisting of an
upper or lower-case letter, or a digit. The password must begin with a letter and contain at least one digit" autocomplete="current-password" required>
<label for="passShowIcon" id="showHide"><input name="passShowIcon" type="checkbox" class="passw" onclick="showHidePassword();">
<span class=" "></span></label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>

Answer 1

If you wanted to make sure the checkbox appears inside the text input. You could wrap both input fields with a relative class, and then apply absolute positioning to the checkbox.
Like so:
https://jsfiddle.net/x0o46g7a/2/
.wrapper {
position: relative;
}
.text {
width: 100%;
height: 100%;
}
.checkbox {
position: absolute;
top: -8px;
right: -8px;
}
Something to note:
I would recommend adding some padding-right to your text input, to make sure it's text does not overlap/underlap the absolute positioned checkbox.

Answer 2

Based on your code, add the following rules in your css.
float: right to .col-75 instead of float left
right: 0 to .col-75 label
those will ensure that checkbox will remain inside the input field.