[FIXED] How to set input box width evenly when input bars are horizontally placed?

Issue

Good day,

I am an absolute beginner to CSS and am trying to align two input fields horizontally (basically I want "create an account" bars on the left half of the page and "sign in" on the right side). Even though I have, more or less, aligned given input fields I can't size the right ones properly.

I used width:40% for the fields on the left and it did its job. The fields became bigger and cover the part that I need. However, if I increase the width of the "right" ones they just get pushed to the left but overall size of the bar stays the same.

I tried changing positions and so on but to no avail. Usually it just breaks the whole design.

Part of HTML code:

<div class="content">
        <div class="signInContent">
            <h1> Sign In </h1>
            <p> Already have an account? </p>
            <hr>

            <label for="email"><b>Email <br></b></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
        <div class="registerContent">
            <h1> Register </h1>
            <p>Please fill in the form to create an account.</p>
            <hr>

            <label for="email"><b>Email</b><br></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
    </div>

Part of CSS code (first left side then right side)

.content input[type=text], input[type=password] {
  width: 40%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  text-align: left;
  border: 3px solid #4CAF50;
  background-color: #333;
  color: #f2f2f2;
}

.registerContent input[type=text]:focus, input[type=password]:focus {
  width: 41%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.signInContent {
  float: right;
  width: 50%;
}

.signInContent input[type=text]:focus, input[type=password]:focus {
  width: 55%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

Basically, the alignment is correct. The width of "left" fields is sized correctly (the field is actually 40%), however the right one only stays about 20% just gets pushed to the left (with white space to its right).

The only idea that I have that "may" fix the problem is making tables with HTML but I am unsure whether it will work or not and until I undertake such process I thought I would ask here. I think there has to be some easier solution. I get to see web-sites with such content all the time.

Also, This is my first post on stackoverflow so if I did something incorrectly please inform me so that I can correct the mistakes.

To explain better, below is how the page looks. I want the right "fields" to be the same size as the left ones

Solution

The first problem is that div.signInContent is only half the width of div.content, while div.registerContent is the full width of div.content. That matters because percentage values (like width: 40%) are relative to the same value (i.e width) of the parent element.

Floating both divs fixes this issue:

.content div {
  float: right;
  width: 50%;
}

Then, you see that both divs show the original problem. This might feel like a step backwards, but now we can treat both divs the same way. 40% of 100 is the same as 80% of 50; so, let's use 80% instead of 40%:

.content input[type=text], input[type=password] {
  width: 80%;
  ...
}

And, here's the full, working demo

.content input[type=text], input[type=password] {
  width: 80%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  text-align: left;
  border: 3px solid #4CAF50;
  background-color: #333;
  color: #f2f2f2;
}

.registerContent input[type=text]:focus, input[type=password]:focus {
  width: 55%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
.content div {
  float: right;
  width: 50%;
}
.signInContent input[type=text]:focus, input[type=password]:focus {
  width: 55%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

<div class="content">
        <div class="signInContent">
            <h1> Sign In </h1>
            <p> Already have an account? </p>
            <hr>

            <label for="email"><b>Email <br></b></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
        <div class="registerContent">
            <h1> Register </h1>
            <p>Please fill in the form to create an account.</p>
            <hr>

            <label for="email"><b>Email</b><br></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
    </div>

Answered By - jpaugh

Answer Checked By - Senaida (PHPFixing Volunteer)