JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="item double-size">
    <div class="column-big">
      <div class="column-content">
        <img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
        <div class="meta-info-doub">
          <h3 class="date-double">23. Oktober 2015</h3>
          <h3 class="title-double">Post2</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="item normal-size">
    <div class="column-small-1">
      <div class="column-content">
        <img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
        <div class="meta-info-norm">
          <h3 class="date-double">23. Oktober 2015</h3>
          <div class="info-title">
            <h3 class="title-normal">Post 3</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="column-small-2">
      <div class="column-content">
        <img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
        <div class="meta-info-norm">
          <h3 class="date-double">23. Oktober 2015</h3>
          <div class="info-title">
            <h3 class="title-normal">Post1</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.wrapper {
  width: 100%;
  height: auto;
  display: flex;
}
.item {
  float: left;
}
.double-size {
  box-sizing: border-box;
  width: 66.6666%;
  height: auto;
  position:relative;
  padding-right: 8px;
}
.normal-size {
  box-sizing: border-box;
  width: 33.3333%;
  height: auto;
  padding-left: 8px;
}
.double-size .column-big {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position:absolute;
  bottom:0;
}
.normal-size .column-small-1 {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 0px 0px 8px 0px;
}
.normal-size .column-small-2 {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 8px 0px 0px 0px;
}
.column-content {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.column-content .meta-info-doub {
  box-sizing: border-box;
  position: absolute;
  height: auto;
  width: 100%;
  bottom: 0;
  right: 0;
  padding: 40px;
}
.column-content .meta-info-norm {
  box-sizing: border-box;
  position: absolute;
  height: auto;
  width: 100%;
  bottom: 0;
  right: 0;
  padding: 20px;
}
.title-double {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  line-height: 1.65;
  background: #161616;
  background: rgba(22, 22, 22, 0.5);
  color: #fff;
  display: inline;
  padding: 4px 0;
  margin: 0;
  -webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  text-transform: uppercase;
}
.title-normal {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  background: #161616;
  background: rgba(22, 22, 22, 0.5);
  color: #fff;
  display: inline;
  padding: 4px 0;
  margin: 0;
  -webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  text-transform: uppercase;
}
.date-double {
  font-family: 'Open Sans', sans-serif;
  display: inline;
  color: #fff;
  font-size: 11px;
 ...