Material Vertical Divider isn't showing up - html

Question

I made a really simple program because i wanted to try out the vertical divider provided by angular material but for some reason it's not showing up.
My code is:
<div>
<span>code</span>
</div>
<mat-divider [vertical]="true"></mat-divider>
<div>
<span>2</span>
</div>

Answer 1

Try adding a height to the vertical divider.
<mat-divider vertical style="height:100px"></mat-divider>
Stackblitz
https://stackblitz.com/edit/angular-wp9f4j?embed=1&file=app/divider-overview-example.html

Answer 2

Try adding following class to .css
.mat-divider-vertical{
height: 100%;
width: 0px !important;
position: inherit !important;
}
and set
style="position: relative;"
to outer element to make "100%" work.

Answer 3

I have used the below approach to get mat-divider vertical to work for my code.
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-2 px-2">Search</div>
<div class="col-md-6">
<input id="search" class="form-control " placeholder="Search" name="search">
</div>
</div>
<div class="row">
<div class="col-md-2 px-2">Search</div>
<div class="col-md-6">
<input id="search" class="form-control " placeholder="Search" name="search">
</div>
</div>
<div class="row">
<div class="col-md-2 px-2">Search</div>
<div class="col-md-6">
<input id="search" class="form-control " placeholder="Search" name="search">
</div>
</div>
</div>
<mat-divider [vertical]="true" style="height: auto;"></mat-divider>
<div class="col-md-5">
<div class="row">
<div class="col-md-2 px-2">Search</div>
<div class="col-md-6">
<input id="search" class="form-control " placeholder="Search" name="search">
</div>
</div>
</div>
Along with
.mat-divider-vertical{
height: 100%;
width: 0px !important;
position: inherit !important;
}
screenshot of the output