JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blogpost">
   <a class="post-title">You can write whatever you want this will not affect the image because you gave a certain width to the post-title which is calculated according to the width of the parent conntainer which is blogpost...</a>
   <div class="post-author-wrapper">
       <img class="thumbnail" src="{{post.author.imageURL}}"> 
       <a class="date-author">post.date - post.author</a>
   </div>
   <br>
   <hr>
   <br>
   <div class="blogpost-content">post.context|linebreaks</div>
   <br>
   <br>
   <br>
</div>

CSS

.blogpost {
  /*Whole blogpost div*/
  border: 5px solid #149414;
  background-color: black;  
  color: #149414;
  width: 700px;
  margin:auto;
  border-radius: 40px;
  border-width: 1px;
}
.blogpost::before, .blogpost::after {
  content: '';
  display: table;
  clear: both;
}
hr{
  /*The middle line in the blogpost*/
  height: 1px;
  background-color: #149414;
  border: none;
  clear: both;
}

.thumbnail{
  /*The author's image of the blogpost*/
  height: 120px;
  width: 120px;
  position: relative;
  border: 3px solid #149414;
  border-radius: 50%;
}

.blogpost-content{
  /*Content in the blogpost*/
  text-align: left;
  margin-left: 30px;
  margin-right: 30px;
}
.post-author-wrapper {
    width: 120px;
    padding: 15px;
    float: right;
    display: block;
}
.date-author{
  /*The date and author div in the blogpost*/
  font-size: 12;
  margin: 0 auto;
  display: block;
}

.green_link{
  /*Green link to the random key*/
  color:#149414;
}

.post-title{
    font-size: 40px;
    padding: 10px 30px 10px 30px;
    width: calc( 700px - 120px - 90px );
    display: block;
    float: left;
}