JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" id="target">
  <div class="box__first-child" align="center">
    <div class="box__child-inner">
      <img src="http://cdn.tgdd.vn/Files/2014/06/24/551004/game-duoi-hinh-bat-chu4.jpg" width="60%" height="60%">
    </div>
  </div>
  <div class="box__second-child">
    <div class="box__child-inner">
      <img class="img-border" id="imgQues" src="https://4.bp.blogspot.com/-K5SwATiq6cI/U84bk7MZPWI/AAAAAAAADkI/4lWV0ErVAFs/s1600/2014-07-22+14.11.00-1.png" />
      <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 {
    position: absolute;
}

.box__first-child .box__child-inner {
  width: 33.33333333333%;
  left: 0;
  top: 0;
}

.box__second-child .box__child-inner {
  width: 66.33333333333%;
  height: 50%;
  right: 0;
  bottom: 0;
}


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

.box img {
  width: 100%;
}

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