CSS：Div 对齐，不像我想要的那样对齐

Question

div not aligning

上图是问题所在，我希望 div 与右侧 div 对齐。我能够为我的第三个 div 做到这一点，它看起来像这样。 how I want alignment

下面是沙盒可以看：https://jsfiddle.net/drtripod/5uyre361/#&togetherjs=dwgrRImtgT

.wrapper {
  min-height: calc(100vh - 80px);
  display: grid;
  grid-template-columns: 50% 50%;
  border-radius: 10px;
  overflow: hidden;
}

.form-wrapper.sign-up {
  min-height: calc(100vh - 80px);
  display: grid;
  grid-template-columns: 50% 50%;
  border-radius: 10px;
  overflow: hidden;
}

.login-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 150px;
  background-color: white;
  transition: 1s ease-in-out;
}

.sign-up {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 150px;
  background-color: white;
  transition: 1s ease-in-out;

.login-right {
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
}
}

我试图添加填充或更改宽度和高度，但最终没有成功，因为当我调整窗口大小时，它只是失去了对齐

Answer 1

你只需要改变“flex-direction: row;”沙箱中类“.login-form-footer”中的属性。