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

[winjose]

Iniciado por 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.

Qué grande. Muy buena respuesta. Voy a ponerme al lío. No conocía este framework. Me surge ahora la siguiente duda: ¿Bootstrap o Flex?. Porque tengo toda la maquetación de la app en Bootstrap, pero es más atractivo el modo en el que Flex trata los datos (más simple). ¿Qué me recomiendan?