JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="row">
        <div class="reds">
            <div class="red"></div>
        </div>
    </div>
    <div class="row">
        <div class="items">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</div>

CSS

.container{width: 100%}
.row{
    padding: 15px
}

.reds{
    display: flex;
    justify-content: flex-end;
}
.reds > .red{
    width: 300px;
    height: 200px;
    background: red;
}
.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}
.items > .item{
    width: 200px;
    height: 150px;
    margin-bottom: 15px;
    background: purple;
    
}