Первая строка текста в третьей.box поднимается над верхней частью div и отсекается. Я хотел бы, чтобы это выглядело так же, как вторая коробка (ну на самом деле в идеале, как вторая коробка плюс...).

Можно ли это сделать с помощью flexbox?Если нет, то можно ли это сделать с другими CSS?Если нет, какой лучший способ сделать это с JS?И на отдельном примечании, почему текст первого блока не выровнен по центру?

http://codepen.io/loren/pen/ojxORN

<div class='box'>
  one line of text
</div>

<div class='box'>
  two lines of text lorem ipsum
</div>

<div class='box'>
  thre lines of text lorem ipsum sin dolor whatever etc
</div>

.box 
  height 40px
  font-size 16px
  width 150px
  border 1px solid black
  margin-bottom 40px
  display flex
  align-items center
  text-align center
  overflow-y hidden