JSFiddle - React, Tailwind, and code Playground

by grafixguy76

HTML

<div class="container-top">


<div class="header-text">
<p class="title">
Lorem Ipsum Dolor Sit Amet Title
</p>
<p class="subtitle">
Vol 12<br>
Jan 2019
</p>

</div>
<div class="header-shape">

</div>

</div>
<div class="image-area">
<img class="cover-img" src="https://storage.googleapis.com/marketplacedevtest/img/vertical-adp-img.jpg" />
</div>

CSS

.container-top {
display: inline;
width: 100%;
}

.container-top .header-text {
  float: left;
  margin-left: 20px;
  font-size: 24px;
  width: 500px;
  height: 185px;
}

.container-top .header-shape {
  width: 185px;
  height: 185px;
  border-bottom: 1px solid blue;
  background: red;
  float: right;
}

.image-area {
  width: 75%;
}

.image-area .cover-img {
  width: 100%;
  margin-top: 0;
  border-top: 1px solid blue;  
}