My footer layout expands and the lists in each column become misaligned as I add more links to it.
I want to make sure that the lists for each column are aligned horizontally on the same row, with the title of each column also in the same row.
levi | Using levi | legal
The image below shows the misalignment of my column headers. How can I properly align them so that the content in each column remains consistent even when more items are added to the list?
https://i.sstatic.net/4RhOb.png
This is an example of how I envision my footer to look:
https://i.sstatic.net/JxIrI.png
Here is my current jsfiddle for reference.
Here is the HTML code I am using:
<md-layout id = "container" style = "max-height:40px;">
<md-layout md-column md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">
<md-list>
<md-list-item class = "md-display-2">levi</md-list-item>
<router-link :to = "{ name: 'About' }"><md-row>About</row></router-link>
<md-row>Customers</md-row>
... (additional rows here)
</md-list>
</md-layout>
<md-layout md-column md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">
<md-row class = "md-display-2" >Using levi</md-row >
... (additional rows here)
</md-layout>
<md-layout md-column md-gutter md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">
<md-column class = "md-display-2">legal</md-column>
<md-column></md-column>
<md-column></md-column>
</md-layout>
</md-layout>