Flexbox Dynamic Line Separator - Ahmad Shadeed

#Flexbox Dynamic Line #Separator - Ahmad Shadeed
▻http://ishadeed.com/article/flexbox-separator

https://ishadeed.com/assets/flexbox-separator/twitter-card.jpg

To make this work on all screen sizes, we need to have the flex-direction: column mobile and flex-direction: row for larger screens.

.section {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

.section:before {
   content: "";
   border: 1px solid #d3d3d3;
   align-self: stretch;
}

@media (min-width: 700px) {
   .section {
       align-items: center;
       flex-direction: row;
   }
}

#css