JSFiddle - React, Tailwind, and code Playground

HTML

<div class="post-container">
  <div class="image-container">
    <img class="image" src="https://smart-union.org/wp-content/blogs.dir/239/files/2015/12/placeholder-640x480.jpg">
    <div class="clear"></div>
    
    <div class="bottom-image"></div>
  </div>
  <div class="post-details-container">
    <div class="header">
      <div class="image-container">
        <img class="profile image" src="https://i.stack.imgur.com/7lf40.gif" />
      </div>
    </div>
    <div class="body">
      <ul class="comments-container">
        <li class="comment">
          <span>
               author
              </span>
          <span>
                This is comment text
              </span>
        </li>
        <li class="comment">
          <span>
               author
              </span>
          <span>
                This is comment text
              </span>
        </li>
        <li class="comment">
          <span>
               author
              </span>
          <span>
                This is comment text
              </span>
        </li>
        <li class="comment">
          <span>
               author
              </span>
          <span>
                This is comment text
              </span>
        </li>
        <li class="comment">
          <span>
               author
              </span>
          <span>
                This is comment text
              </span>
        </li>
        <li class="comment">
          <span>
               author
              </span>
          <span>
                This is comment text
              </span>
        </li>
        <li class="comment">
          <span>
               author
              </span>
          <span>
                This is comment text
              </span>
        </li>
        <li class="comment">
          <span>
               author
              </span>
          <span>
                This is comment text
              </span>
        </li>
        <li class="comment">
    ...

CSS

html, body{
    height: 100%;
  }
  .post-container {
  display: flex;
  border: 1px solid #e6e6e6;
  flex-direction: row;
  max-width: 906px;
  background-color: #fff;
      margin: auto;
}

.post-details-container {
  padding: 0;
  min-width: 335px;
  display: flex;
  flex-direction: column;
  max-width: 335px;
}

.header {
  padding: 0px 20px 20px 15px;
  flex-direction: row;
  background: red;
  align-items: center;
}

.image-container {
  background: green;
}

.image {
  height: auto;
  line-height: 0;
  float: left;
  max-width: 100%;
  width: 100%;
}

.profile {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.comments-container {
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-width: 280px;
  flex-grow: 1;
}

.body {
  background: yellow;
  padding: 0 15px 0 15px;
  height: 50vh;
  overflow-y: auto;
}

.comment {
  margin-bottom: 10px;
}

.footer {
  height: 148px;
  background: black;
}
.bottom-image{
  position: relative;
    background: green;
    height: 65px;
}
.clear{
  clear:both;
}