JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pagecontentwrapper">
<div id="flexcontainer" class="flexMother rowParent">

    <div id="aktuelles" class="flexChild"><div class="topflex">
       <h1 class="frontpage">Aktuelles</h1>
        <article class="news_front"><section><span class="posttime">13. 11. 2014, 16:09&nbsp;Uhr</span>&nbsp;&nbsp; <p>Lorem ipsum...</p></section></article><article class="news_front"><section><span class="posttime">13. 11. 2014, 12:00&nbsp;Uhr</span>&nbsp;&nbsp; <p>Lorem ipsum...</p>
</section></article><article class="news_front"><section><span class="posttime">13. 11. 2014, 8:15&nbsp;Uhr</span>&nbsp;&nbsp; <p>Lorem ipsum...</p></section></article></div>
       <div class="bottomflex">Historie</div>
    </div>

    <div id="rechtehaelfte" class="flexChild rowParent">

       <div id="mittlerespalte" class="flexChild columnParent">
         <div id="besucher" class="flexChild"><div class="topflex">
         <h1 class="frontpage">Besucher</h1>
         <article class="besucher_front"><p>Für heute sind keine Besucher eingetragen.</p></article></div>
         <div class="bottomflex">&nbsp;</div>
         </div>
         <div id="raumplan" class="flexChild"><div class="topflex">
         <h1 class="frontpage">Raumplan</h1>
         <article class="besucher_front"><p>Für heute ist keine Raumbelegung eingetragen.</p></article></div>
         <div class="bottomflex">&nbsp;</div>
         </div>
         <div id="media" class="flexChild"><div class="topflex">
         <h1 class="frontpage">Media</h1>
         <p>image here</p>
         </div>
         </div>
       </div>

       <div id="rechtespalte" class="flexChild columnParent">
         <div id="topnews" class="flexChild"><div class="topflex">
<h1 class="frontpage">Top-News</h1>
       <article class="topnews_front"><section><p>Lorem ipsum...</p>
</section></article>         </div>
         <div class="bottomflex" id="topnews_historie">Historie</div>
         </div>
         <div id="technik" class="flexChild"><div...

CSS

/* Layout */
#pagecontentwrapper {
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  min-height:100%;
  padding:25px;
}

/* Inhalte */
#flexcontainer {
  display:-webkit-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
}

/* Flex */
.rowParent, .columnParent{
  display:-webkit-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
  -webkit-box-direction:normal;
  -webkit-box-orient:horizontal;
  -webkit-flex-direction:row;
  -ms-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:nowrap;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
  -webkit-box-pack:start;
  -webkit-justify-content:flex-start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}

.columnParent{
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}

.flexMother{
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  -webkit-align-self:auto;
  -ms-flex-item-align:auto;
  align-self:auto;
}

.flexChild{
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  -webkit-align-self:auto;
  -ms-flex-item-align:auto;
  align-self:auto;
  display:flex;
}

.topflex {
  -webkit-align-self:flex-start;
  -ms-flex-item-align:flex-start;
  align-self:flex-start;
  width:100%;
}

.bottomflex {
  -webkit-align-self:flex-end;
  -ms-flex-item-align:flex-end;
  align-self:flex-end;
}

#aktuelles { border:1px solid #004985; }
#besucher, #raumplan, #media, #topnews, #technik { border:1px solid #a0a0a0; }
#besucher, #raumplan, #topnews { margin-bottom:35px; }
#aktuelles { margin-right:25px; }
#besucher, #raumplan, #media { margin-right:12px; }
#topnews, #technik { margin-left:13px; }

article.news_front { padding:20px; }
article.news_front:last-of-type { margin-bottom:0; }
article.news_front:last-of-type section {...