JSFiddle - React, Tailwind, and code Playground

HTML

<div class="summaries">
  <article class="featured"></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</div>

SCSS

.summaries {
  display: flex;
  flex-wrap: wrap;
  text-align:right;
  
  article {
    display: flex;
    flex-wrap: wrap;
    margin-left: 24px;
    width: calc(60% - 24px);
  }
}

article {
  height: 100px;
  background-color: green;
  outline: 1px solid black;
  &.featured {
    height: 500px;
    flex: 0 0 calc(40% - 24px);
    margin-left: 0;
    margin-right: 24px;
    background-color: orange;
  }
}