Vertical line between two button - html

Question

I am developing an angular 2 app with angular material. I have two buttons sign in and sign up I want a vertical line between the two buttons; I saw many examples on different sites but it doesn't work. I want that the buttons be on same line (inline and between them a little vertical line).
this is the html code :
.textAlign {
text-align: center;
color: white;
position: absolute;
top: 50%;
left: 50%;
/* à 50%/50% du parent référent */
transform: translate(-50%, -50%);
font-family: 'Source Sans Pro';
}
h1 {
font-weight: bold;
}
.image {
width: 100%;
}
.ligne_verticale {
width: 5px;
border-left: 5px solid gray;
height: 70px;
}
.nav-button {
text-align: center;
vertical-align: middle;
border: solid 1px;
border-radius: 5px;
background-color: white;
font-weight: bold;
width: 120px;
margin-right: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="content">
<div>
<img class="image" src="http://seabramota.com/img/intro-bg.jpg" alt="image
d'accueil">
<div class="textAlign">
<h1>{{ 'PAGEHOME.TITLE' | translate }}</h1>
<br>
<h3>{{ 'PAGEHOME.DESCRIPTION' | translate }}</h3>
<br>
<button mat-button color="primary" class="nav-button" (click)="openConnectDialog()">
{{ 'PAGEHOME.CONNECTBUTTON' | translate }}
</button>
<button mat-button color="primary" class="nav-button" (click)="
openRegisterDialog()">
{{ 'PAGEHOME.INSCRIREBUTTON' | translate }}
</button>
</div>
</div>

Answer 1

Something like that ?
.container {
display: flex;
width: 100%;
justify-content: center;
}
button {
background: #99A3FF;
color: white;
border: 0;
padding: 6px 12px;
border-radius: 2px;
}
.button-container {
padding: 12px 24px;
}
.button-container:not(:last-child) {
border-right: 1px solid #ddd;
}
<div class="container">
<div class="button-container"><button>Register</button></div>
<div class="button-container"><button>Log In</button></div>
</div>