JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<div class="wrapper">


<div class="line-wrapper"><div class="line"></div></div>
<div class="event">
  <div>
  test A
  </div>
  
  <div class="event-icon">
    <div class="line-wrapper"><div class="line"></div></div>
    <div class="filler"></div>
    <div class="line-wrapper"><div class="line"></div></div>
  </div>
  <div>
  test B
  </div>
</div>
<div class="line-wrapper"><div class="line"></div></div></div>

CSS

.event {
  display: flex:
  flex-direction: column;
}

.event-icon {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  height: 24px;
}

.line-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 4px 1fr;
  grid-template-areas: "head" "line" "foot";
  flex: 1;
}


.filler { background: red; } 

.line { grid-area: line; background: blue; }

.wrapper {
  display: flex;
}