Hello I have this code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="estilos1.css">
</head>
<body>
<div class="container">
<header class="header">
<img src="assets/images/Logo Kimer_239x135.png" class="imagenLogo" />
</header>
<div class="tituloPagina">
<span class="textoTituloPagina">
<p> PLATAFORMA DE PAGOS ONLINE</p>
</span>
</div>
<div class="main">
<form class="frmLogin">
<p class="tituloFrmLogin">Ingrese número de DNI y contraseña</p>
<div class="contenidoFormulario">
<div class="input-group">
<span class="input-group-addon"><img src="assets/images/Icono_Usuario.png"
class="iconoVentana" /></span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Número de DNI">
</div>
<br />
<div class="input-group">
<span class="input-group-addon"><img src="assets/images/Icono_Usuario.png"
class="iconoVentana" /></span>
<input id="password" type="password" class="form-control" name="password"
placeholder="Contraseña">
</div>
<p class="textoOlvidoContraseña form-text">¿Olvidaste tu contraseña?</p>
<div class="input-group">
<span class="input-group-addon iconoVentana"></span>
<button type="submit" class="btn btn-primary form-control btnIngreso">INGRESAR</button>
</div>
<br />
</div>
<p class="textoEsperaDeposito form-text">Tiempos estimados de espera: BCP, Interbank y BBVA: 20 minutos
| Interbancario: 48 horas del dia útil</p>
</form>
</div >
<div >
</div>
<div >
</div>
<div class ="rayavertical" >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div class="simboloreloj">
<!-- <img src="assets/images/Icono_Reloj.png" class="imagensimbolo" />
Hola que tal -->
</div>
<footer class="footer">
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
and this css code using css-grid
@font-face {
font-family: "Open Sans";
src: url("assets/fonts/OpenSans-Bold.ttf") format("ttf"),
url("assets/fonts/OpenSans-BoldItalic.ttf") format("ttf"),
url("assets/fonts/OpenSans-ExtraBold.ttf") format("ttf"),
url("assets/fonts/OpenSans-ExtraBoldItalic.ttf") format("ttf");
}
@font-face {
font-family: "Dosis";
src: url("assets/fonts/Dosis-Bold.otf") format("otf"),
url("assets/fonts/Dosis-ExtraBold.otf") format("otf"),
url("assets/fonts/Dosis-ExtraLight.otf") format("otf"),
url("assets/fonts/Dosis-Regular.otf") format("otf");
}
body{
background-image: url('assets/images/background.jpg');
font-family: Open Sans;
}
.container{
display: grid;
/* grid-template-columns: 15% 2% 66% 2% 15%; */
grid-template-columns: 19% 1% 59% 1% 20%;
grid-template-rows: 15% auto 7% 400px 15% auto;
}
.imagenLogo {
width: 140px;
height: 80px;
/* float: right;*/
clear: right;
margin-top: 12px;
}
header, footer{
grid-column-start: 1;
grid-column-end: 2;
}
header{
grid-row-start: 2;
grid-row-start: 2;
}
.tituloPagina{
grid-column: 3;
grid-row: 2;
display: grid;
grid-template-columns: auto;
grid-template-rows: 10px auto 80px;
}
.textoTituloPagina{
grid-column: 1;
grid-row: 2;
color: white;
float: none;
text-align: left;
font-weight: bold;
font-size: xx-large;
font-stretch: extra-expanded;
vertical-align: middle;
}
.main{
grid-column: 3;
grid-row: 4;
}
/* FORMULARIO */
.frmLogin{
display: grid;
grid-template-columns: 5% 25% 40% 25% 5%;
grid-template-rows: 7% 15% 5% 53% 10% 10%;
border-radius: 1%;
background-color: white;
/*height: 350px;*/
width: 550px;
}
.rayavertical{
background-color: white;
}
.tituloFrmLogin{
grid-row: 2;
grid-column-start: 1;
grid-column-end: 6;
color : #3B7DB9;
text-align: center;
font-weight: bold;
font-size: x-large;
font-stretch: ultra-expanded;
}
.iconoVentana{
width: 32px;
height: 32px;
margin-right: 5px;
margin-top: 2px;
}
.contenidoFormulario {
grid-row: 4;
grid-column: 3;
}
.textoOlvidoContraseña {
text-align: center;
}
.btnIngreso {
background-color: #3B7DB9;
border-color: #3B7DB9;
border-radius: 1%;
}
.textoEsperaDeposito{
grid-row: 6;
grid-column-start: 1;
grid-column-end: 6;
font-size: 12px;
text-align: center;
}
.imagensimbolo{
width: 40px;
height: 40px;
}
/* .container > div {
background-color: white;
align-items: start;
} */
.simboloreloj{
align-self: start;
justify-self: start;
/* justify-items: center; */
background-color: white;
and i wan to insert a short vertical line beteween the class header and the class Titulopagina as i show below my question is how can i do it?, thank you in advance