浮动元素应位于同一行，但在两行上呈现

Question

我在statistic2 div中的h2文字未与statistic1 h2 text

的右侧对齐

这是我的HTML：

<div class="statistics">
<div class="statistic1"><h2>Top 100 Highest Number of Comments</h2></div>
<div class="statistic2"><h2>Top 100 Highest Number of Comments</h2></div>
</div>

这是我的CSS：

.statistics {
  position: relative;
  height: 500px;
  background-color: #ffffff;
  width: 1200px;
  margin: 0px auto;
  padding: 20px 25px;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  font: 14px/20px Arial, Helvetica, Sans-serif;   
}
.statistic1 {
  width:50%;
  border-right: 1px solid #d0d0d0;
  float:left;   
}
.statistic2 {
  width:50%;
}
.statistics .statistic h2 {
  font: 24px/24px DinWebCond, Sans-serif;
  color: #606060;
  margin: 0px 0px 5px 0px;
  text-transform: uppercase;
}

这是输出：