How to add a vertical line separating "box1" and "box2"

#1

Is there a way to add a vertical line separating regions “box1” and “box2”. Thank you.

<html><title>Explore</title>
<link rel = "stylesheet" type = "text/css" href = "style10.css">
</head>
<body>
    <div class = "container">

       <div class = "box1">
          <p>Content in box1</p></div>

       <div class = "box2">
          <p>Content in box1</p></div>           

    </div>
</body>
</html>

.container{
    width: 95%;
    margin: auto;
}

.box1{
    float:left;
    width: 60%;
    border: 1px solid grey;
    padding: 10px;
    box-sizing: border-box;
    background-color: lightyellow;
}

.box2{
    float:left;
    width: 40%;
    border: 1px solid grey;
    padding: 10px;
    box-sizing: border-box;
    background-color: lightpink;
}
#2

You can use <hr> for a vertical line as well.
Set the width to 1 and the size(height) as long as you want.

#3

Hi @ashliii,

You have so many techniques out there to achieve what you want. It really up to you. Have a look on this pen where I make use of border-left.

#4