JS CSS

VERTICAL LINES WITH HTML CSS

(a quick guide)

LINE WITH CSS BORDER

01

<div class="border-l">Left border</div> <div class="border-r">Right border</div> LEFT BORDER .border-l { border-left: 5px solid red; } RIGHT BORDER .border-r { border-right: 5px dashed blue; }

LINE IN CENTER

02

<div class="wrapper">   <div class="left-side">Left</div>   <div class="right-side">Right</div> </div>   FLEX WRAPPER  .wrapper { display: flex; }   LEFT-RIGHT DIMENSIONS .left-side { width: 50%; }  .right-side { flex-grow: 1; } VERTICAL LINE  left-side { border-right: 5px dotted red; }

HR AS VERTICAL LINE

03

<hr width="1" size="100">