JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<main class="aspect-box">
  <section class="block-aspect">
    <header class="aspect-spacer">&nbsp;</header>
    <article class="tile">
      <aside class="vert-align">
        <h2>1 2 3 4 5 6 7 8 9</h2>
      </aside>
    </article>
  </section>
  <section class="block-aspect">
    <header class="aspect-spacer">&nbsp;</header>
    <article class="tile">
      <aside class="vert-align">
        <h2>Bisschen text!</h2>
        <p>1 12 113 11114 111115 11114</p>
      </aside>
    </article>
  </section>
</main>

CSS

*, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing: border-box;}
.aspect-box {width: 50%; border: 1px solid #ccc; padding: 1rem 1rem 0 0;margin:0 auto;position:relative;}
.aspect-box:after {content:'';visibility:hidden; display:block;clear:both;height:0px;}
.block-aspect {float:left;width:calc(100% / 2);position:relative;}
.block-aspect.tile-3 {width:calc(100% / 3);}
.block-aspect .aspect-spacer, .tile-3:before {content:"";display:block;padding-top:100%;}
.block-aspect .tile {background:#cdcdcd;position:absolute;top:0;right:0;bottom:1rem;left:1rem;text-align:center;overflow:hidden;}
.block-aspect .tile .vert-align {display:inline-block;margin:0;line-height:1;vertical-align:middle;width:90%;text-align:center;}
.block-aspect .tile .vert-align h2, .block-aspect .inner .tile .vert-align p {text-align:center;}
.block-aspect .tile:before {content:"";display:inline-block;height:100%;vertical-align:middle;}
h2 {color:#d50;margin:10px 0 6px 0;font-size:18px;font-size:1.125rem;text-align:center;}