-3

enter image description hereI want to create a separating line between 2 divs. But the line shows at the end of last div.

.line {
  display: inline-block;
  width: 2px;
  height: 20px;
  background: black;
}
<div class="col">
  <div class="info_badge" id="teams_footer"></div>
  <div class="line"></div>
  <div class="info_badge" id="coinventor_footer">hello</div>
</div>
David Thomas
  • 249,100
  • 51
  • 377
  • 410
Tushar Arora
  • 93
  • 1
  • 5
  • 2
    There does not seem to be enough code in your question to ascertain what your problem might be. Might I suggest you expand the code in your example so that we can see how the CSS is currently positioning your elements? – Wongjn Aug 01 '22 at 19:19
  • There's quite a few libraries which can do this for you. Joint.js is very good: https://www.jointjs.com/ – Rory McCrossan Aug 01 '22 at 19:58

2 Answers2

0

Did you tried using <hr/> between the two divs like this?

<div></div>
<hr/>
<div></div>

And then add styles to it:

<hr style="width:50%;text-align:left;margin-left:0">
Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Ayoub Wazane
  • 39
  • 5
0

You can achieve your result without the extra <div> element

<div class="col">
    <div class="info_badge" id="teams_footer"></div>
    <div class="info_badge" id="coinventor_footer">hello</div>
</div>

.col > div:not(:last-child)::after
{
    content: "";
    display: inline-block;
    width: 2px;
    height:20px;
    background:black;
}