JSFiddle - React, Tailwind, and code Playground

HTML

<div class="preceedingElement"></div>
<div class="layout">
  <div class="firstItem"></div>
  <div class="lastItem"></div>
</div>

SCSS

.preceedingElement{
  width: 100%;
  height: 30px;
  background: #FAD7A0;
}

@mixin TwoSpacedItemsComposition(
  $minimalHorizontalSpaceBetweenItems: 0,
  $verticalSpaceBetweenItems: 0
) {
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  margin-top: -$verticalSpaceBetweenItems;
  margin-right: -$minimalHorizontalSpaceBetweenItems;
  
  
  > *{
    margin-top: $verticalSpaceBetweenItems;
    margin-right: $minimalHorizontalSpaceBetweenItems;
    
    &:last-child {
      margin-left: auto;
    }
  }
}
  
.layout {
  @include TwoSpacedItemsComposition(
    $minimalHorizontalSpaceBetweenItems: 12px,
    $verticalSpaceBetweenItems: 24px
  )
}

.firstItem {
  width: 200px;
  height: 34px;
  background: #EC7063;
}

.lastItem {
  width: 400px;
  height: 24px;
  background: #7FB3D5;
}