Как сделать эти два блока одинаковыми по высоте?
Забыть о флоатах, почитать о flex. По умолчанию у него у смежных колонок equal height стоит
В общем если сделать текст в одну строку, который при зумах не будет делаться в две строки, например в моём случае "читать все статьи" > "все статьи", то тогда можно сделать line-heigha.test1 {
  float:left;
  width:31%;
  font-size: 28px;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC; 
  color: #555555;
  margin: 10px auto;
  margin-bottom: 10px; 
  line-height: 220px;  
  text-align: center;     
}