JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box -item1"></div>

<div class="box -item2"></div>

<div class="box -item3"></div>

CSS

* {margin: 0;padding: 0}

body {
  background-image:
    linear-gradient(to right, rgba(0,0,0, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0, 0.15) 1px, transparent 1px);
  background-size: 50px auto, auto 50px;
}

.box {
    margin-bottom: 10px;
    width: 200px;
    height: 150px;
    background: red;
}

.box.-item1 {
  margin-left:  calc((100% - 200px) * 4 / 5 );
  margin-right: calc((100% - 200px) / 5 );
}

.box.-item2 {
  margin-left: auto;
  margin-right:  calc((100% - 200px) / 5 );
}

.box.-item3 {
  margin-left:  calc((100% - 200px) * 4 / 5 );
  margin-right: auto;
}