I am facing an issue with aligning 2 divs on the same line, separated by a vertical line while ensuring that the line always has the height of the parent div.
Despite trying various solutions suggested online, none seem to work for me. I cannot use position:absolute, and applying display:table or overflow:hidden on the parent does not have any effect.
This is my code:
HTML:
<div class="parent-div">
<div class="first-child">
<span class="block">Item</span>
<span class="block">Item</span>
<span class="block">Item</span>
</div>
<div class="second-child">
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
</div>
</div>
CSS:
.parent-div {
background:green;
display: inline-block;
width: 100%;
}
.first-child,
.second-child {
float: left;
}
.first-child {
width: 50px;
border-right: 2px solid red;
}
.second-child {
padding-left: 10px;
}
.block {
display: block;
}