Kevin Powell - Community•16mo ago

Vertical line to take 100% height of the box

I want the box to take the 100% height as in the picture what should i do here is the code pen link"https://codepen.io/Talha-Mustafa/pen/YzRdPyR

Talha Mustafa

CodePen

YzRdPyR

...

3 Replies

croganm•16mo ago

You mean you want the box to be like the full height of the screen? The card to be exact

MoniOP•16mo ago

i mistakenely pasten wrong link for code pen check this one"https://codepen.io/Talha-Mustafa/pen/YzRdPyR i want the blue line to take 100% height and should toch top and bottom

croganm•16mo ago

Don't make the line using a div Here's the CSS that worked

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.box{
  border:2px solid black;
  display:flex;
}
.left-side{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-right:15px;
  padding-left:15px;
  padding-top:30px;
}
.right-side{
  padding-top:30px;
  padding-left: 15px;
}
.right-side {
 border-left: 3px solid #48abe0;
}

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.box{
  border:2px solid black;
  display:flex;
}
.left-side{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-right:15px;
  padding-left:15px;
  padding-top:30px;
}
.right-side{
  padding-top:30px;
  padding-left: 15px;
}
.right-side {
 border-left: 3px solid #48abe0;
}

You could just move the border-left up and combine the duplicate rules but I'm on mobile so it's tough

Gaming

Programming

Vertical line to take 100% height of the box