CSS:调整窗口大小时，其中一个DIV的位置会更高

使用vertical-align: top;

.Card {
    display: inline-block;
    width: 20%;
    height: 30rem;
    margin: 0 1rem 0 1rem;
    padding: 0rem;
    background-color: rgb(250, 250, 250);
    border: 1px solid black;
    border-radius: 10px;
    position: relative;
      vertical-align: top;
}

还有一个最好的解决方案是，你可以将你的卡平铺成全宽，我在演示中已经展示了这一点。（用于响应模式）

响应式CSS:

@media only screen and (max-width: 800px) { 
/*** You can change the responsive screen size as per your requirement.
    .Card {
      width: 100%;
      margin-bottom: 20px;  
     }
 }

完整演示：

* {
  box-sizing: border-box;
}
body {
  height: 100vh;
  font-family: "Open Sans";
}
.header {
  background-color: #1b9ef2;
  width: 100%;
  height: 20rem;
}
.header h1 {
  color: white;
  font-size: 1.5rem;
  line-height: 15rem;
  text-align: center;
}
.CardContainer {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  margin-top: -6rem;
}
.Card {
  display: inline-block;
  width: 20%;
  height: 30rem;
  margin: 0 1rem 0 1rem;
  padding: 0rem;
  background-color: rgb(250, 250, 250);
  border: 1px solid black;
  border-radius: 10px;
  position:relative;
}
.Card h2 {
  color: #1b9ef2;
  font-size: 1.2rem;
  font-weight: 600;
  padding:2.5rem;
}
.cardimgcontainer
{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
.Card img
{
  width:80%;
  height:40%;
  max-height:180px;
  text-align:center;
}
.Card .Price
{
  position:absolute;
  bottom:0;
  width:100%;
  padding:2.5rem;
  line-height:1.5rem;
  color:rgb(70,70,70);
}
.Card .Price .bold
{
  font-weight:800;
  font-size:1.4rem;
}
@media only screen and (max-width: 800px) {	
	.Card {
		width: 100%;
		margin-bottom: 20px;	
	}
}

<div class="header">
  <h1>Choose your subscription plan
  </h1>
</div>
<div class="CardContainer">
  <div class="Card">
    <h2>2 Days Trial
    </h2>
    <div class="cardimgcontainer">
      <img src="https://s-media-cache-ak0.pinimg.com/originals/0d/e6/b3/0de6b34699563781365b286c45359692.jpg" />
    </div>
    <div class="Price">
      <span class="bold">$9.99
      </span>
      <br />1 account
    </div>
  </div>
  <div class="Card">
    <h2>Personal
    </h2>
    <div class="cardimgcontainer">
      <img src="http://static.vecteezy.com/system/resources/previews/000/090/876/original/rolling-hills-landscape-vector.jpg" />
    </div>
    <div class="Price">
      <span class="bold">$29.99
      </span>
      <br />5 accounts
    </div>
  </div>
  <div class="Card">
    <h2>Advanced
    </h2>
    <div class="cardimgcontainer">
      <img src="https://d13yacurqjgara.cloudfront.net/users/968424/screenshots/2287311/2015_10_12_flatlandscape_800x600_v01_1x.jpg" />
    </div>
    <div class="Price">
      <span class="bold">$39.99
      </span>
      <br />10 accounts
    </div>
  </div>
  <div class="Card">
    <h2>Business
    </h2>
    <div class="cardimgcontainer">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/18/fe/3f/18fe3f54a4ae949f7993442a9d8a3447.jpg" />
    </div>
    <div class="Price">
      <span class="bold">$49.99
      </span>
      <br />50 accounts
    </div>
  </div>
</div>

只需为Card类添加vertical-align: top;。

您的布局在大屏幕上看起来不错。这就是为什么您只需要为小型设备编写此代码，这样您就可以尝试下面的代码。

@media (max-width: 768px){ 
  .CardContainer .Card{
    float: left;
  }
}

您需要将vertical-align:top;添加到.Card。

因为您使用了display:inline-block所以，默认情况下它是vertical-align:baseline;

它将使元素的基线与父元素的基线对齐。

您更新的Codepen

.Card {
  display: inline-block;
  width: 20%;
  height: 30rem;
  margin: 0 1rem 0 1rem;
  padding: 0rem;
  background-color: rgb(250, 250, 250);
  border: 1px solid black;
  border-radius: 10px;
  position:relative;
  vertical-align:top;
}

我认为这可以完成任务：

.CardContainer .card {vertical-align:top;}