Draw a verticle line between two vertically placed divs - CSS? - html

Question

I am trying to achieve something like this
Circle with letters starts at starting of first div and second div with a line separater in between. Here the length of line should be calculated based on space in middle of two divs. I tried couple of ways but no luck. Please suggest me an approach to do this.
Update:
I tried #Vadim answer, but in my case separater length should be dynamic, not static, and div's are like this:
<div class="container">
<div class="first-div">
<div class="letter">Q</div>
<div>another div</div>
</div>
<div class="second-div">
<div class="letter">A</div>
<div>another div</div>
</div>
</div>
I would like to draw vertical line between letters. Height of line should be dynamic according to inner divs height.

Answer 1

You can use flexbox to achieve desired layout:
.container {
background-color: #ccc;
padding: 15px;
/* align items in one column and take space defined by content */
/* this is used for centering separator */
display: inline-flex;
flex-direction: column;
}
.letter {
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 50%;
/* styles for text centering */
display: flex;
justify-content: center;
align-items: center;
}
.separator {
width: 5px;
height: 50px;
border-radius: 3px;
background-color: #fff;
margin-top: 5px;
margin-bottom: 5px;
/* center horizontally */
align-self: center;
}
<div class="container">
<div class="letter">Q</div>
<div class="separator"></div>
<div class="letter">A</div>
</div>