CSS Layout - trzy wiersze jeden dynamiczny

Czy wie ktoś jak zrobić takie coś:
Mamy jednego div'a który ma szerokość 100% i wysokość 100%;
Następnie w nim mamy 3 divy. Pierwszy przyklejony jest do góry w którym jest tylko jedna linia tekstu, drugi zaraz pod nim w nim także jest jedna linia tekstu.
Trzeci div jest pod nimi i wypełnia całą pozostałą powierzchnię, jego wysokość jest dynamiczna. Tekst jest wieloliniowy. Jego tekst wyrównany jest w pionie na środku (vertical-align: middle). Zamiast tych trzech divów może być tabela. Czy w ogóle da się to zrobić bez obliczania w js wysokości trzeciego diva i ustawiania jego wysokości ręcznie? Zrobiłem jakiś szkielet ale tekst w trzecim divie był trochę obniżony.

Coś takiego?
html

<div class="main">
  <div class="first">
  text
  </div>
  <div class="second">
  text2
  </div>
  <div class="third">
  text3
  text3
  </div>
</div>

css

.main {
  height: 200px;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.first { background-color: red; }
.second { background-color: blue; }
.third {
  background-color: green;
  display: flex;
  align-items: center;
 }

https://jsfiddle.net/jrxc8feu/

@m31: Zauważyłem jeszcze mały problem. Tekst w trzeciej kolumnie na samym dole jest wyrównany do lewej strony. Jak mogę go wyśrodkować? text-align: center; nic nie pomaga... A nawet jeśli u mnie wyśrodkowało mi tekst to był wyśrodkowany ale wyrównany do lewej. Tak jakby trzeci wiersz podzielony był na niewidoczne kolumny.. Jak można go rozciągnąć na 100% strony? Mam ustawione width: 100%.