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

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

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.

Answer 2

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.