ꯚꯔꯇꯤꯀꯦꯜ ꯔꯨꯜ ꯇꯧꯕꯥ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯚꯔꯇꯤꯀꯦꯜ ꯔꯨꯂꯁꯤꯡ ꯑꯁꯤ <hr>ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯁꯤꯅꯥ ꯏꯟꯁꯄꯤꯔꯦꯁꯟ ꯇꯧꯏ, ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯀꯃꯟ ꯂꯦꯑꯥꯎꯇꯁꯤꯡꯗꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯗꯤꯚꯥꯏꯗꯔꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ <hr>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯨꯝꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯏ:

• ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ 1pxꯄꯥꯛ ꯆꯥꯎꯏ꯫
• ꯃꯈꯣꯌꯅꯥ min-heightꯑꯣꯐ...1em
• ꯃꯈꯣꯌꯒꯤ ꯃꯆꯨ ꯑꯁꯤ ꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ currentColorꯑꯃꯁꯨꯡ ...opacity

ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯤꯌꯨ꯫

ꯈꯨꯗꯝ

<div class="vr"></div>

ꯚꯔꯇꯤꯀꯦꯜ ꯔꯨꯂꯁꯤꯡꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯑꯋꯥꯡꯕꯥ ꯑꯗꯨ ꯐ꯭ꯂꯦꯛꯁ ꯂꯦꯑꯥꯎꯇꯁꯤꯡꯗꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯏ:

<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

ꯁ꯭ꯇꯦꯀꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯈꯣꯌ ꯑꯁꯤ ꯁ꯭ꯇꯦꯀꯁꯤꯡꯗꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ :

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>