JSFiddle - React, Tailwind, and code Playground

HTML

<section>
      <aside>
         <div>
            <figure>
               <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Leuchtturm_Arngast.jpg" alt="Leuchtturm">
            </figure>
         </div>
         <div>
            <p>Name</p>
            <p>Status</p>
            <dl>
               <dt>Registriert seit:</dt>
               <dd>27. Dezember 2012</dd>
               <dt>Beiträge</dt>
               <dd>2</dd>
               <dt>Punkte für Erfolge</dt>
               <dd>3</dd>
            </dl>
         </div>
      </aside>
      <article>
         <div>
            <h1>Überschrift</h1>
            <p>Ewald lächelte und ging an den Wagen. Das gute Hausweib hatte, obschon es nahe an den Sechzigen stand, noch keinen vollen Tag die Pfähle im Stich gelassen, in denen es von Jugend auf lebte und webte; bloss Theilnahme und Liebe zu Gustav, konnte es zu diesem Entschluss bewegen. </p>
         </div>
         <div>
            <p>Infoleiste: Name, Datum, Melden ...</p>
         </div>
      </article>
   </section>
   <section>
      <aside>
         <div>
            <figure>
               <img src="https://c1.staticflickr.com/5/4006/4673833040_8e33011df8.jpg" alt="VW Bus">
            </figure>
         </div>
         <div>
            <p>Name</p>
            <p>Status</p>
            <dl>
               <dt>Registriert seit:</dt>
               <dd>08. August 2015</dd>
               <dt>Beiträge</dt>
               <dd>124</dd>
               <dt>Punkte für Erfolge</dt>
               <dd>55</dd>
            </dl>
         </div>
      </aside>
      <article>
         <div>
            <h1>Überschrift</h1>
            <p>Kaum standen am folgenden Tage die hohen Felsengipfel im Glanz des Sonnenlichts, so hüpfte Gustav aus dem Bette und fand - wem kommt dabey nicht das ehemahls selbst genossene kindische Entzücken beym Anblick des Weihnachtsgeschenks ins Gedächtniss? - einen netten Anzug auf dem Stuhle am Bette, den die Gattinn des...

CSS

@media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0.5rem;
      }
      body>* {
         display: flex;
      }
      body>*>* {
         padding: 0.2rem;
         border: 1px solid orange;
         border: 1px solid silver;
      }
      body>*>:nth-child(1) {
         flex: 0 0 160px;
      }
      body>*>:nth-child(2) {
         flex: 1 0 1%;
      }
      img {
         display: block;
         max-width: 120px;
         max-height: 120px;
         padding: 0;
         margin: 0;
      }
      body>*>:nth-child(1)>div:nth-child(1) {
         width: 120px;
         height: 120px;
         border: 1px solid gold;
         margin: 0 auto;
         display: flex;
         justify-content: center;
      }
      body>*>:nth-child(1)>div:nth-child(1)>figure {
         padding: 0;
         border: 1px solid red;
         margin: 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
      }
      body>*>:nth-child(1)>div:nth-child(2) {
         /*background-color: silver;*/
      }
      body>*>:nth-child(1)>div:nth-child(2) p,
      body>*>:nth-child(1)>div:nth-child(2) dt,
      body>*>:nth-child(1)>div:nth-child(2) dd {
         font-size: 0.8rem;
         white-space: nowrap;
         padding: 0;
         margin: 0.2rem;
      }
      body>*>:nth-child(1)>div:nth-child(2) dl {
         display: flex;
         flex-wrap: wrap;
      }
      body>*>:nth-child(1)>div:nth-child(2) dt,
      body>*>:nth-child(1)>div:nth-child(2) dd {
         flex: 1 1 1%;
      }
      body>*>:nth-child(1)>div:nth-child(2) dd {
         text-align: right;
      }
      body>*>:nth-child(2) {
         display: flex;
         flex-direction: column;
    ...