JSFiddle - React, Tailwind, and code Playground

HTML

<div class="uk-child-width-1-2 wrap" uk-grid>
  <div>
    <img src="http://via.placeholder.com/330x220" alt="">
  </div>
  <div class="uk-child-width-1-2 wrap2" uk-grid>
    <img src="http://via.placeholder.com/150x100" alt="">
    <img src="http://via.placeholder.com/150x100" alt="">
    <img src="http://via.placeholder.com/150x100" alt="">
    <img src="http://via.placeholder.com/150x100" alt="">
  </div>
</div>
<br>
<br>

<div class="var2" uk-grid>
  <img src="http://via.placeholder.com/330x220" alt="">
  <img src="http://via.placeholder.com/150x100" alt="">
  <img src="http://via.placeholder.com/150x100" alt="">
  <img src="http://via.placeholder.com/150x100" alt="">
  <img src="http://via.placeholder.com/150x100" alt="">

</div>

CSS

* {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  justify-content: space-between;
  width: 670px;
  height: 220px;
}

.wrap2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  width: 320px;
}

.var2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
  width: 670px;
  height: 220px;
}