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>
    <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
             ...

CSS

.post-container {
  display: flex;
  border: 1px solid #e6e6e6;
  flex-direction: row;
  max-width: 906px;
  background-color: #fff;
}
.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:50%;
  overflow-y:auto;
}
.comment {
  margin-bottom:10px;
}
.footer {
  height:40%;
  background:black;
}