How can I place my two
on the same alignment?

Question

I want "Login" & "Register" to be aligned with the height of the top, look at the example below for more clarity

And I would like to be like this

I also use Bootstrap 4 but not for what I would like to do, I read somewhere that it is better to do it yourself without using Bootstrap.

Here is the code I 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 it can be done using Bootstrap 4, that's fine with me too.

Need to provide a working example to test the code or try ```align-items:flex-start;``` to solve the issue. — Onkar, Dec 28 '20 at 10:25
align-items: flex-start; will align it as you want. replace the 'center' with 'flex-start' in your 'align-items' property — Ansul, Dec 28 '20 at 10:28
@Coder111 ; Here is what I get [example](imgur.com/a/7tXWzKo) — Andrzej Jesztar, Dec 28 '20 at 10:31

score 1 · Answer 1 · answered Dec 28 '20 at 10:30

Remove align-items: center; style and set the padding to 0 3em (change the 3em to your desirable value)

.content {
  height: calc(100vh - 100px);
  width: 100%;
  display: flex;
  overflow: hidden;
}

.content>div {
  flex: 1;
  width: 100%;
  padding:0 3em; // Update 3em to fit your UI
}

<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>

For the sake of completeness: Bootstrap has [spacing classes](https://getbootstrap.com/docs/4.0/utilities/spacing/). There is no need to set spacing within your css. — KHansen, Dec 28 '20 at 10:35

score 0 · Answer 2 · answered Dec 28 '20 at 10:26

0

Remove this property align-items: center; on .content

.content{
  height: calc(100vh - 100px);
  width: 100%;
  display: flex;
  /*align-items: center;*/ /*remove this*/
  overflow: hidden;
}

answered Dec 28 '20 at 10:26

Lalji Tadhani

14,041
3
23
40

How can I place my two on the same alignment?

2 Answers2

How can I place my two
on the same alignment?