'Bar Between two points in a container

I have a container (CardContainer) that has a few child elements (snippet below) and I would like to build a bar that I can fill in between the two points (the card image and the chevron) and I am finding it difficult to figure out the right way to do this. How can I make sure that it stays between these two elements even when the page is different sizes?

<div class="CardContainer">
  <div class="CardLineItem">
    <div class="CardLineItemImage"><img
        src="https://icm.aexp-static.com/Internet/Acquisition/US_en/AppContent/OneSite/category/cardarts/platinum-card.png">
    </div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 320 512"
      class="CardLineItemChevron" height="25%" width="25%" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
      </path>
    </svg>
    <div class="CardLineItemProgressBar">
      <div class="CardLineItemProgressBarOutline">test</div>
    </div>
  </div>
</div>

I have tried many different things from position: relative, absolute, etc and am struggling to figure this out.

Any help is appreciated! Thanks!

htmlcss


Solution 1:[1]

You can try to add a border bottom to the first div:

border-bottom: 5px solid black;

Another way can be to use <hr> tag between both of them:

<div class="CardContainer">
  <div class="CardLineItem">
    <div class="CardLineItemImage"><img
        src="https://icm.aexp-static.com/Internet/Acquisition/US_en/AppContent/OneSite/category/cardarts/platinum-card.png">
    </div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 320 512"
      class="CardLineItemChevron" height="25%" width="25%" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
      </path>
    </svg>
    <hr>
    <div class="CardLineItemProgressBar">
      <div class="CardLineItemProgressBarOutline">test</div>
    </div>
  </div>
</div>

Maybe you will need to put some extra css to the line, to make it look like you prefer.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 marc_s

Related Questions