JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child1">1</div>
  <div class="child2">2</div>
</div>
<div class="parent">
  <div class="child3">3</div>
  <div class="child4">4</div>
</div>

CSS

.parent{
  width:500px;
  margin:auto;
  height:110px;
  background:white;
  margin-bottom:150px;
  position:relative;
  top:0;
  border-bottom:1px dashed #e7e6ea;
}

.parent .child1,.parent .child2,.parent .child3,.parent .child4{
  width:170px;
  height:40px;
  text-align:center;
}
.parent .child1,.parent .child2{
  background:rgba(0,0,0,.3);
}
.parent .child3,.parent .child4{
  background:rgba(255,10,80,.3);
}
.child1{  margin-left: -150px; }
.child2{  float:right; margin-right: 150px; }

/*.child3{ margin-top: -150px; }*/
.child4{ position:absolute;bottom:0;margin-bottom: 150px; }