I am looking to align "Login" and "Register" with the height of the top, as shown in the example below for better clarity.
https://i.sstatic.net/OArTq.png
Here is how I want it:
https://i.sstatic.net/MeI83.png
Although I use Bootstrap 4, I prefer to achieve this without relying on Bootstrap. I came across a suggestion that building it from scratch might be more effective.
Below is the code snippet I have used:
CSS:
.content{
height: calc(100vh - 100px);
width: 100%;
display: flex;
align-items: center;
overflow: hidden;
}
.content > div{
padding:10em;
flex: 1;
width: 100%;
}
HTML:
<div class="content">
<div class="content-one">
<h1>Login</h1>
<form method="post">
<div class="form-group">
<label>Username</label>
<div class="control">
<input type="text" class="form-control" name="username" placeholder="Username" />
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="control">
<input type="password" class="form-control" name="password" placeholder="Password" />
</div>
</div>
<div class="form-group">
<input value="Log in" type="submit" class="btn btn-red fw-4" />
</div>
</form>
</div>
<div class="content-two">
<h1>Register</h1>
<form action="/register" method="post">
<div class="form-group">
<label>Username</label>
<div class="control">
<input type="text" class="form-control" name="username" placeholder="Username" />
</div>
</div>
<div class="form-group">
<label>Email</label>
<div class="control">
<input type="text" class="form-control" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="control">
<input type="password" class="form-control" name="password" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label>Are you a robot ?</label>
<div class="control">
<div class="g-recaptcha" data-sitekey="6Le18_YZAAAAAPZHps-_4XB3U6yTXh0dMFsJdJpF"></div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<p class="form-check-label" for="defaultCheck1">
I have read and agree <a href="#">the terms of use</a>.
</p>
</div>
</div>
<div class="form-group">
<input value="Register" type="submit" class="btn btn-grey" />
</div>
</form>
</div>
</div>
If achieving this using Bootstrap 4 is feasible, that works too.