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

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

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

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

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

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

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

ꯈꯨꯗꯝ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

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

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

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

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

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

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

ꯑꯍꯥꯅꯕꯥ ꯑꯥꯏꯇꯦꯝ꯫

ꯑꯅꯤꯁꯨꯕꯥ ꯑꯥꯏꯇꯦꯝ꯫

ꯑꯍꯨꯃꯁꯨꯕꯥ ꯑꯥꯏꯇꯦꯝ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<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>