CSS - Add gap border to inline list

Question

HTML

<div class="details">
  <div class="detail">4 beds</div>
  <div class="detail">2 bath</div>
  <div class="detail">1600 sqft</div>
</div>

 

CSS/SCSS

.details {
display: flex;
// gap: 10px;
margin-bottom: 5px;
font-size: 13px;
color: $card-text-color;
border-top: 1px solid $card-border-color; 
border-bottom: 1px solid $card-border-color; 
padding: 5px 0;
    .detail {
        // flex: 1;
        border-left: 1px solid $lightColor;
        padding: 0 10px;
        &:first-child {
            padding-left: 0;
        }
    }
}