JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div class="container">
  <div class="dropdown">
    Dropdown 1
  </div>
  <div class="horizontal-connector">
    <div></div>
    <div class="vertical-connector">
      <div></div>
    </div>
  </div>
  <div class="dropdown">
    Dropdown 2
  </div>
</div>

SCSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  
  height: 100px;
}

.dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}

.horizontal-connector {
   display: grid;
   grid-template-rows: repeat(2, 50%);
   
   > div:first-child {
     border-bottom: 1px solid black;
   }
}

.vertical-connector {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  
  > div:first-child {
    border-right: 1px solid black;
  }
}