CSS Div对齐问题：无法实现预期的右侧Div对齐效果

我遇到了CSS Div对齐异常的问题，期望左侧Div能与右侧Div对齐，但当前效果不符（见问题截图）。第三个Div已经实现了预期的对齐效果（见参考截图）。尝试过调整padding、宽高属性，但窗口缩放后对齐状态会失效。

问题截图 #

预期对齐效果 #

相关CSS代码 #

.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;
}
}

内容的提问来源于stack exchange，提问作者drtripod