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: 600px;
}
 
.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: flex-start;
}

.items > .item{
    width: 150px;
    height: 150px;
    margin: 5px;
    background: purple;
}