JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" id="target">
  <div class="box__first-child" align="center">
    <div class="box__child-inner">
      
    </div>
  </div>
  <div class="box__second-child">
    <div class="box__child-inner">
      <div class="comment" id="chatbox">
      </div>
    </div>
  </div>
</div>

CSS

.box {
  width: 640px;
  height: 540px;
  float: left;
  overflow: hidden;
  /**
    Just for visualization 
  **/
  background: gray;
  position: relative;
}

/**
  Just dummy names, rename as you like
*/

.box__first-child,
.box__second-child {
  width: 100%;
}

.box__child-inner {
  background-size: auto;
  width: 100%;
}

.box__first-child .box__child-inner {
  background-image: url('http://cdn.tgdd.vn/Files/2014/06/24/551004/game-duoi-hinh-bat-chu4.jpg');
  height: calc( 540px / 3 * 1 );
}

.box__second-child .box__child-inner  {
  background-image: url(' https://4.bp.blogspot.com/-K5SwATiq6cI/U84bk7MZPWI/AAAAAAAADkI/4lWV0ErVAFs/s1600/2014-07-22+14.11.00-1.png');
  height: calc( 540px / 3 * 2 );
  border-radius: 20px;
}

/**
  Force images to always take remaining space
*/

.box img {
  width: 100%;
}

.img-border {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  margin: 5px;
}