I am struggling to align 3 menu words in columns where the length of the words vary, but I want them to collectively occupy 100% of the vertical div (similar to justify). I have attempted using justified text-align and setting different letter-spacing for each word within a paragraph tag, but so far, no success. I hope I have clearly explained the issue and the solutions I have tried.
Thank you.
HTML:
<div class="container vert" id="left">
<div class="container" id="menu">
<a href=""><p class="menuitem" id="works">works</p> </a> <br>
<a href=""> <p class="menuitem" id="contacts">contacts </p> </a> <br>
<a href=""> <p class="menuitem" id="share">share </p> </a> <br>
</div>`
</div>
CSS:
#left {
float: left;
border: 1px solid red;
width: 20%;
opacity: 0.7;
}
#menu {
word-wrap: break-word;
left: auto;
height: auto;
font-family: 'PT Sans', 'sans-serif';
letter-spacing: 16px;
font-size: 18pt;
color: #4D4D4D;
text-align: center;
}
.menuitem{
margin: 0;
width: 100%;
}