I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you.
https://i.sstatic.net/XIeiQ4Ec.png
HTML
<div class='tabs'>
<button mat-button>
<span class='name'>A</span>
</button>
<mat-divider [vertical]="true" style="height: 10px; margin: 0 20px 0 10px; "></mat-divider>
<button mat-button>
<span class='name'>B</span>
</button>
<mat-divider [vertical]="true" style="height: 10px; margin: 0 20px 0 10px; "></mat-divider>
<button mat-button >
<span class='name'>C</span>
</button>
<mat-divider [vertical]="true" style="height: 10px; margin: 0 20px 0 10px; "></mat-divider>
<button mat-flat-button class='density'>
<span class='material-icons' style='transform: rotate(180deg)'>logout</span>
<div class='name-logout'>Logout</div>
</button>
</div>
CSS
tabs {
display: flex;
font-family: Roboto, sans-serif;
button {
border: none;
margin: 0 20px 0 10px;
background: transparent;
align-items: center;
cursor: pointer;
.name {
color: white;
font-size: 14px;
line-height: normal;
}
.material-icons {
background-color: white;
color:#006AF5;
}
.name-logout {
background-color: white;
font-family: Roboto, sans-serif;
line-height: normal;
text-size-adjust: auto;
color:#006AF5;
}
}
.mat-divider-vertical{
height: 100%;
align-items: center;
background-color: white;
width: 0px !important;
position: inherit !important;
}
}