JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexlist">
 <div class="entry"></div>
 <div class="entry"></div>
 <div class="entry selected">
   <div class="absolute"></div></div>
 <div class="entry"></div>
 <div class="entry"></div>
 <div class="entry"></div>
 <div class="entry"></div>
 <div class="entry"></div>
 <div class="entry"></div>
 <div class="entry"></div>
 <div class="entry"></div>
 <div class="entry"></div>
 <div class="entry"></div>
 <div class="entry"></div>
</div>

SCSS

.flexlist {
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
}

.entry {
  position: relative;
  min-width: 96px;
  height: 100px;
  border: 1px solid red;
  margin: 1px;
  &.selected {
    background: red;
  }
}

.absolute {
  position: absolute;
  left: 0;
  top: 100%;
  width: 300px;
  background: green;
  z-index: 1;
  height: 80px;
}