JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<section class="wrapper">
    <header><h1>Test</h1></header>
    <article>A short snippet showing that the <code>&lt;header></code> element is centered vertically...</article><!--
    --><article>A short article snippet...</article><!--
    --><article>A short article snippet...</article><!--
    --><article>A short article snippet...</article>
</section>
<section class="wrapper">
    <header><h1>Test</h1></header>
    <article>A short snippet showing that the <code>&lt;header></code> element is centered vertically even with a longer snippet length.</article><!--
    --><article>A short article snippet...</article><!--
    --><article>A short article snippet...</article><!--
    --><article>A short article snippet...</article>
</section>
<section class="wrapper">
    <header><h1>Test</h1></header>
    <article>A short snippet showing that the <code>&lt;header></code> element is centered vertically...</article><!--
    --><article>A short article snippet...</article><!--
    --><article>A short article snippet...</article><!--
    --><article>A short article snippet...</article><!--
    --><article>Items that don't fit on the same line simply wrap. The <code>&lt;header></code> repositions accordingly.</article>
</section>

CSS

.wrapper {
    margin:1em;
    position:relative;
    padding-left:2em; /* line-height of .wrapper div:first-child span */
    background:#fed;
}
.wrapper header {
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:2em; /* line-height of .wrapper div:first-child span */
    overflow:hidden;
    white-space:nowrap;
}
.wrapper header h1 {
    -moz-transform-origin:0 50%;
    -moz-transform:rotate(-90deg) translate(-50%, 50%);
    -webkit-transform-origin:0 50%;
    -webkit-transform:rotate(-90deg) translate(-50%, 50%);
    -o-transform-origin:0 50%;
    -o-transform:rotate(-90deg) translate(-50%, 50%);
    -ms-transform-origin:0 50%;
    -ms-transform:rotate(-90deg) translate(-50%, 50%);
    transform-origin:0 50%;
    transform:rotate(-90deg) translate(-50%, 50%);
    position:absolute;
    top:0;
    bottom:0;
    height:2em; /* line-height of .wrapper div:first-child span */
    margin:auto;
    font-weight:bold;
    font-size:1em;
    line-height:2em; /* Copy to other locations */
}
.wrapper article {
    display:inline-block;
    width:25%;
    padding:1em 1em 1em 0;
    vertical-align:middle;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}