Cuál es la forma adecuada de resolver esta implementación...

[Rafael]

¡SIMPLICIDAD!

Para que te des una idea, acá están las dos primeras cajtas, y no me digas que no se ve bonito el código limpio:

https://codepen.io/RafaelO/pen/BwGBjY

Código HTML:

<section class="app flex">
    <div>
      <p class="green">T</p>
      <p>001<br>1607</p>
    </div>
 
    <div>
      <div class="flex">
      <p class="green">T</p>
      <p class="red">T</p>
      </div>
      <p>001<br>1607</p>
    </div>
</section>
 

El código CSS te muestra tres cosas importantes:

1) ¡Anidar!
2) Reutilizar
3) El Flexbox

Código CSS:

.flex {
  display: -ms-flexbox;
  display: flex;}
.flex>* {flex-grow: 1;}
 
.app {width: 180px;}
.app>div {
  text-align: center;
  border: solid 1px black;
  margin: 2px;}
 
.green {
  background-color: #0D0;}
.red {
  background-color: #E00;}
 
p {
  margin: 0;
  padding: 5px;
  font-family: verdana;}
 

Y ya el código está largo para mostrarte letra sans serif, pero lo importante y la lógica ya está definida.

En este caso de plano no uses medidas relativas, usa medidas fijas.

Evidentemente tu código necesita elaborarse más. Pero la clave está en esos tres puntos, anidar, reutilizar y flexbox: https://www.google.com.mx/search?q=flexbox

P.D. No adjuntes una imagen, necesitas adjuntar un editor de código como el Codepen o JsFiddle.