JSFiddle - React, Tailwind, and code Playground

HTML

<div class="choice-wrap">
  <div class="middle-input-wrap">
    1
  </div>
  <div class="middle-input-wrap">
    2
  </div>
  <div class="middle-input-wrap">
    3
  </div>
  <div class="middle-input-wrap">
    4
  </div>
</div>
<div class="choice-wrap">
  <div class="middle-input-wrap">
    1
  </div>
  <div class="middle-input-wrap">
    2
  </div>
  <div class="middle-input-wrap">
    3
  </div>
  <div class="middle-input-wrap">
    4
  </div>
  <div class="middle-input-wrap">
    5
  </div>
</div>

CSS

.choice-wrap {
  float: left;
  clear: both;
}
.choice-wrap > .middle-input-wrap {
  border: 4px dashed #000;
  border-left-width: 0;
  float: left;
  text-align: center;
  font-size: 40px;
  height: 40px
}
.choice-wrap > .middle-input-wrap:first-child {
  border-left-width: 4px;
}
.choice-wrap > .middle-input-wrap:hover:not(:first-child) {
  margin-left: -4px;
}
.choice-wrap > .middle-input-wrap:hover {
  border: 4px solid #000;
}
.choice-wrap:nth-child(2) > .middle-input-wrap:hover {
  margin-top: 0px;
}
.choice-wrap > div {
  width: 56px;
}
.choice-wrap:nth-child(2) > .middle-input-wrap {
  border-top: 0;
  width: 44px;
}