JSFiddle - React, Tailwind, and code Playground

by WoJWoJ

HTML

<div id="container">
  <div class="hello box">hello</div>
  <div class="world box">world</div>

  <div class="box opaque">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
<div></div>

CSS

.box {
  background-color: gray;
}
#container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}
.hello {
  grid-column: 1 / 4;
}
.world {
  grid-column: 4 / 6;
}
.opaque {
  opacity: 0
}