JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="leftbox">
    <div class="list">
      <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
        <li>g</li>
        <li>h</li>
        <li>i</li>
        <li>j</li>
        <li>k</li>
      </ul>
    </div>
    <img src="http://placehold.it/500x100" alt="">
    <img src="http://placehold.it/500x100" alt="">
    <img src="http://placehold.it/500x100" alt="">
  </div>
  <div class="rightbox">
    <ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li><li>f</li><li>g</li><li>h</li><li>i</li><li>j</li><li>k</li><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li><li>f</li><li>g</li><li>h</li><li>i</li><li>j</li><li>k</li></ul>
  </div>
</div>

CSS

body {
    margin: 0;
}
.box {
    background-color: pink;
    position: relative;
    width: 100%;
}
.leftbox {
    background-color: #000;
    width: 50%;
}
.leftbox .list {
    background-color: #fff;
    height: 100px;
}
.leftbox img {
    display: block;
    width: 100%;
}
.rightbox {
    background-color: blue;
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
}
ul {
    height: 100%;
    margin: 0;
    overflow: auto;
}
.pdt {
  width: 100px;
  background: plum;
  clear: left;
}
.all {
  background: powderblue;
  height: 100%;
}
.pd {
  width: 100%;
  padding: 25%;
  background: green;
}

@media screen ( min-width: 1000px ) {
	.box {
		width: 1000px;
	}
	.rightbox {
		height: 400px;
	}
}