How to Add a Horizontal Line Between Two divs using CSS?

There are two ways to add a horizontal line between two divs. First, put a <hr> tag between the two divs, and the second is to place any block-level element such as a div, p, etc, between the two divs and apply a bottom or top border on it.

Either way, you can achieve the same task. However, to make the three align in the same line we have to put some extra CSS.

To serve that purpose, we will use the CSS flexbox so that we can make the horizontal line responsive between the two divs.

Ok, So here is the first method, where we are putting a <hr> tag between the two divs to make the horizontal line:

Example:

.wrapper{
   display: flex;
   align-items: center;
   column-gap: 10px;
}
.divider{
   flex-grow: 1;
   border-color: blue;
}
.left, .right{
   border: 2px solid red;
   height: 50px;
   width: 50px;
   background: yellow;
}

And here is the second approach where we are placing a third div between the two divs and applying a blue color bottom border to it. Which will look exactly like a horizontal line.

Please note that the align-items: center; is used to vertically center the horizontal line.

Example:

.wrapper{
   display: flex;
   align-items: center;
   column-gap: 10px;
}
.divider{
   flex-grow: 1;
   border-bottom: 2px solid blue;
}
.left, .right{
   border: 2px solid red;
   height: 50px;
   width: 50px;
   background: yellow;
}