JSFiddle - React, Tailwind, and code Playground

by grafixguy76

HTML

<div class="container">
  <div class="container__header">
    <div class="container__header__title-area">
      <div class="title">Lorem ipsum dolor</div>
      <div class="subtext">Vol. 12</div>
      <div class="subtext">January 2019</div>
    </div>
    <div class="container__header__color-area"></div>
  </div>
  <div class="container__picture">
    <div class="container__picture__image-area">
      <img src="https://static1.squarespace.com/static/5840dc111b631b6653bee9d6/5a8366fe24a694835effd8ad/5a83671e0d9297d341a93478/1518561058145/whsg.jpg?format=300w" />
    </div>
    <div class="container__picture__color-area">
      <img src="http://3.bp.blogspot.com/-OJl5bphhx1U/ViXJAA7Ah_I/AAAAAAAAOv0/qE1-tKvxXlM/s1600/adp.gif" />
    </div>
  </div>
</div>

SCSS

.container {
  &__header {
    width: 100%;

    &__title-area {
      float: left;
      width: 75%;
      margin: 20px 0 20px;
      color: #F2635D;

      .title {
        font-size: 21px;
        margin-bottom: 5px;
        padding-left: 20px;
      }

      .subtext {
        font-size: 12px;
        padding-left: 20px;
      }
    }

    &__color-area {
      background-color: #F2635D;
      width: 25%;
      
      float: right;
    }
  }

  &__picture {
    float: right;

    &__image-area {
      width: 75%;

      img {
        width: 100%;
        float: right;
      }
    }

    &__color-area {
      width: 25%;
      background-color: white;
      justify-content: center;
      padding-bottom: 25px;

      img {
        width: 100px;
        height: 50px;
      }
    }
  }
}